Javascript 选中复选框时显示/隐藏div

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

这里我得到了一个页面，如果我选中复选框，div就会显示出来。没问题，而且工作正常

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

如果选中了至少1个复选框，我需要如何修改脚本以始终显示div，而不会出现这种“跳跃”

隐藏/显示
这个JavaScript展示了如何隐藏分区
我在这里！
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
显示隐藏复选框
< /代码> 您将需要始终考虑<强>所有< /强>复选框的状态！
您可以在选中或取消选中时增加或减少一个数字，但是想象一下，在选中其中三个的情况下，站点负载会增加或减少

因此，您始终需要检查所有这些：

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

更改输入框，如

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


}

函数showMe（框）{
var chboxs=document.getElementsByName（“c1”）；
var vis=“无”；
对于（变量i=0；i
复选框
通知
如果你能创建一个js提琴就太好了？旁白：这个表让我害怕，你应该使用
Show Hide Checkbox
之类的标签哈！？当问题是如何显示/隐藏一个DIV元素而不是一个Checkbox时，这怎么可能是答案呢！@Fandango68他正在检查复选框以确定所需的可见性。最后一个line通过其ID获取div元素，然后将其显示设置为预定的可见性。变量名（box）只是误导，因为如果查看传递给函数的参数，box实际上以“div1”的值结束：欢迎来到Stack，Peter！请给你的答案添加一些解释，以便提问者能够理解你在做什么。
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;


}

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