檢查是否選中了所有復選框，然后將類添加到某個內容

Question

在選中所有輸入復選框后，我需要在元素中添加一個類，而無需單擊提交按鈕。 我更喜歡不涉及jQuery，因為這將是頁面上唯一的javascript元素。 這是我到目前為止所看到的，它是在第一次單擊復選框后添加類，這不是我想要的。

Codepen鏈接

JS

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

任何幫助都是極好的！

Answer 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');
        }
    }
}

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

Answer 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');
    }
}