如果选中复选框，则显示/隐藏 div答案

【问题标题】：Show/hide div if checkbox selected如果选中复选框，则显示/隐藏 div
【发布时间】：2013-08-24 17:11:32
【问题描述】：

如果至少选中 1，我需要一个带有复选框和可见 div 的页面。

在这里我得到页面，如果我选中复选框，则会显示 div。没关系，并且工作正常。

当我选中 3 个复选框并取消选中 1 时，缺少 div，当我再次选中某个框时，div 将显示 - 它不正确。

如果至少选中了 1 个复选框，而没有此“跳跃”，我如何修改脚本以始终显示 div？

<html>
<head>
<title>CB Hide/Show</title>
<script type="text/javascript">
<!--
function showMe (it, box) {
  var vis = (box.checked) ? "block" : "none";
  document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<h3 align="center"> This JavaScript shows how to hide divisions </h3>

<div id="div1" style="display:none">
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>

<form>
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox



</form>
</body>
</html>

【问题讨论】：

如果你能创建一个 js fiddle 会很棒吗？
除此之外：table 让我害怕，你应该使用像 <input name="c1" id="c1_1"><label for="c1_1">Show Hide Checkbox</label> 这样的标签

标签： javascript jquery dom-events

【解决方案1】：

像这样改变输入框

<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox

和js代码一样

function showMe (box) {

    var chboxs = document.getElementsByName("c1");
    var vis = "none";
    for(var i=0;i<chboxs.length;i++) { 
        if(chboxs[i].checked){
         vis = "block";
            break;
        }
    }
    document.getElementById(box).style.display = vis;


}

这是demo fiddle

【讨论】：

嗯！？当问题询问如何显示/隐藏 DIV 元素而不是 CheckBox 时，这怎么可能是答案？
@Fandango68 他正在检查复选框以确定所需的可见性。最后一行通过其 ID 获取 div 元素，然后将其显示设置为预定的可见性。变量名 (box) 只是具有误导性，因为如果您查看传递给函数的参数，box 实际上会以“div1”的值结束:)

【解决方案2】：

您需要始终考虑所有复选框的状态！

您可以在选中或取消选中时增加或减少一个数字，但想象一下网站加载时其中三个已选中。

所以你总是需要检查所有这些：

<script type="text/javascript">
<!--
function showMe (it, box) {
  // consider all checkboxes with same name
  var checked = amountChecked(box.name);

  var vis = (checked >= 3) ? "block" : "none";
  document.getElementById(it).style.display = vis;
}

function amountChecked(name) {
  var all = document.getElementsByName(name);

  // count checked
  var result = 0;
  all.forEach(function(el) {
    if (el.checked) result++;
  });

  return result;
}
//-->
</script>

【讨论】：

【解决方案3】：

<input type="checkbox" name="check1" value="checkbox" onchange="showMe('div1')" /> checkbox

<div id="div1" style="display:none;">NOTICE</div>

  <script type="text/javascript">
<!--
   function showMe (box) {
    var chboxs = document.getElementById("div1").style.display;
    var vis = "none";
        if(chboxs=="none"){
         vis = "block"; }
        if(chboxs=="block"){
         vis = "none"; }
    document.getElementById(box).style.display = vis;
}
  //-->
</script>

【讨论】：

欢迎来到 Stack，彼得！请在您的回答中添加一些解释，以便提问者能够理解您在做什么。