3 checkboxes showing same div (display:none)_问答_开发者

3 checkboxes showing same div (display:none)

开发者 https://www.devze.com 2023-04-09 16:53 出处：网络

I don\'t know much about coding and I need to build this form with 3 different areas/divs (A,B,C), where:

相关专题：css javascript

I don't know much about coding and I need to build this form with 3 different areas/divs (A,B,C), where:

A - always shown, controls B and C display

B - Shown if checkboxes 1,2 and/or 3 on A are selected

C - shown if checkbox 4 on A is selected

So, what I've reached so far was:

<head>
<script type="text/javascript">
<!--
function showMe (it, box) { 
   var vis = (box.checked) ? "block" : "none"; 
   document.getElementById(it).style.display = vis;
 } 
//-->
</script>
</head>

<body>
 <form>
<input type="checkbox" value="value1" onclick="showMe('div1', this)" />value1
<input type="checkbox" value="value2" onclick="showMe('div1', this)" />value2
<input type="checkbox" value="value3" onclick="showMe('div1', this)" />value3
<input type="checkbox" value="value4" onclick="showMe('div2', this)" />value3
</form>

<div id="div1" style="display:none;">Show Div 1</div>
<div id="div2" style="display:none;">Show Div 2</div>
开发者_如何学Python
</body>

The thing is, if I check 1,2 and/or 3, Div B shows properly, but if I uncheck one of them, div B hides. I need div B to show whenever one of them is checked.

Assigning a different div to each checkbox won't work since all the checkboxes "activate" the same form area (div).

Any sugestions?

Right now, your event handler only takes into consideration the checkbox that caused the event. What it really needs to do is to poll each of the three checkboxes to see if any of them are checked at the time of the event.

So it makes sense for the logic to be maintained in your event handler:

<head>
<script type="text/javascript">
<!--
function updateVis () { 
   var show1 = 
       (document.theForm.input1.checked) 
        || (document.theForm.input2.checked)
        || (document.theForm.input3.checked) ? "block" : "none"; 
   document.getElementById("div1").style.display = show1;

   var show2 = (document.theForm.input4.checked) ? "block" : "none";
   document.getElementById("div2").style.display = show2;
 } 
//-->
</script>
</head>

<body>
 <form name="theForm">
<input name="input1" type="checkbox" value="value1" onclick="updateVis()" />value1
<input name="input2" type="checkbox" value="value2" onclick="updateVis()" />value2
<input name="input3" type="checkbox" value="value3" onclick="updateVis()" />value3
<input name="input4" type="checkbox" value="value4" onclick="updateVis()" />value3
</form>

<div id="div1" style="display:none;">Show Div 1</div>
<div id="div2" style="display:none;">Show Div 2</div>

</body>