检查是否选中了所有复选框，然后将类添加到某些东西答案

【问题标题】：Check if all checkboxes are checked, then add class to something检查是否选中了所有复选框，然后将类添加到某些东西
【发布时间】：2019-08-12 21:56:23
【问题描述】：

我需要在选中所有输入复选框后向元素添加一个类，而无需单击提交按钮。我更不想让 jQuery 参与进来，因为这将是页面上唯一的 javascript 元素。这是我到目前为止所拥有的，看起来它是在第一次单击复选框后添加类，这不是我想要的。

Codepen link

function showMe (box) {
  var checkbox = document.getElementsByName("selectPlant");
  for(var i=0;i<checkbox.length;i++) {
    if(checkbox[i].checked){
      document.getElementById(box).classList.add('show');
    }
  }
}

HTML

<a href="#" id="reward" style="opacity:0">
  TADA!
</a>
<form action="" id="">
  <input type="checkbox" name="selectPlant" onclick="showMe('reward')">
  <input type="checkbox" name="selectPlant" onclick="showMe('reward')">
  <input type="checkbox" name="selectPlant" onclick="showMe('reward')">
  <input type="checkbox" name="selectPlant" onclick="showMe('reward')">
</form>

CSS

#reward {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  color: white;
  pointer-events: none;
}

#reward.show {
  opacity: 1 !important;
}

input[type=checkbox] {
  width: 40px;
  height: 40px;
}

任何帮助都会很棒！

【问题讨论】：

标签： javascript forms checkbox

【解决方案1】：

如果选中了特定的复选框，您需要获取复选框的总数并增加一个计数器。如果数字匹配，则必须勾选所有复选框。

function showMe (box) {
    var checkbox = document.getElementsByName("selectPlant");
    var counter=0;
    for(var i=0;i<checkbox.length;i++) {
        if(checkbox[i].checked){
            counter++;
        }
        if(counter==checkbox.length)
        {
            document.getElementById(box).classList.add('show');
        }
    }
}

【讨论】：

【解决方案2】：

您可以添加长度变量复选框并将 i 与长度进行比较。

 var length = checkbox.length;
      var check = 0;
      for(var i=0;i<checkbox.length;i++) {
        if(checkbox[i].checked){

          check++;
        }
        if (check == length){
           document.getElementById(box).classList.add('show');
         }
      }

function showMe (box) {
  var checkbox = document.getElementsByName("selectPlant");
  var length = checkbox.length;
  var check = 0;
  for(var i=0;i<checkbox.length;i++) {
    if(checkbox[i].checked){
     
      check++;
    }
    if (check == length){
       document.getElementById(box).classList.add('show');
     }
  }
}

#reward {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: red;
  color: white;
  pointer-events: none;
}

#reward.show {
  opacity: 1 !important;
}

input[type=checkbox] {
  width: 40px;
  height: 40px;
}

<a href="#" id="reward" style="opacity:0">
  TADA!
</a>
<form action="" id="">
  <input type="checkbox" name="selectPlant" onclick="showMe('reward')">
  <input type="checkbox" name="selectPlant" onclick="showMe('reward')">
  <input type="checkbox" name="selectPlant" onclick="showMe('reward')">
  <input type="checkbox" name="selectPlant" onclick="showMe('reward')">
</form>

【讨论】：

【解决方案3】：

除了正常行为外，如果没有复选框，此答案将默认为 true

function showMe (box) {
    var checkbox = document.getElementsByName("selectPlant");
    var allChecked=true;
    for(var i=0;i<checkbox.length;i++) {
        if(!checkbox[i].checked){
            allChecked = false;
        }
    }
    if(allChecked){
        document.getElementById(box).classList.add('show');
    }
}

【讨论】：