Проверьте, установлены ли все флажки, затем добавьте класс к чему-либо

Question

Мне нужно добавить класс к элементу после того, как все флажки ввода отмечены, без необходимости нажимать кнопку отправки. Я бы предпочел не привлекать jQuery, поскольку это будет единственный элемент javascript на странице. Вот что у меня есть, и похоже, что он добавляет класс после первого щелчка по флажку, а это не то, что мне нужно.

Кодовая ссылка

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

Вы можете добавить флажок переменной длины и сравнить 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 2

В дополнение к обычному поведению этот ответ по умолчанию будет иметь значение 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');
    }
}

Answer 3

Вам необходимо получить общее количество флажков и увеличить счетчик, если установлен соответствующий флажок. Если числа совпадают, все флажки должны быть отмечены.

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