Question

我对编码知之甚少，我需要用3个不同的区域/ div（A，B，C）构建这个表单，其中：

A - 始终显示，控件B和C显示

B - 如果选中A上的复选框1,2和/或3，则显示

C - 如果选中A上的复选框4，则会显示

所以，到目前为止我所得到的是：

<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>

</body>

问题是，如果我检查1,2和/或3，Div B显示正确，但如果我取消选中其中一个，则div B隐藏。每当检查其中一个时，我都需要显示div B.

为每个复选框分配不同的div将不起作用，因为所有复选框都“激活”相同的表单区域（div）。

任何sugestions？

Answer 1

现在，您的事件处理程序仅考虑导致该事件的复选框。它真正需要做的是轮询三个复选框中的每一个，以查看是否在事件发生时检查了它们中的任何一个。

因此，在事件处理程序中维护逻辑是有意义的：

<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>

3个复选框显示相同的div（显示：无）

1 个答案: