3 checkboxes showing same div (display:none)
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>
加载中,请稍侯......
精彩评论