jeudi 21 mars 2019

Check if all checkboxes are checked, then add class to something

I need to add a class to an element after all input checkboxes are checked, without having the need to click on a submit button. I'd much prefer not to get jQuery involved since this would be the only javascript element on the page. Here's what I have so far and it looks like it's adding the class after the first click on the checkbox, which is not what I want.

Codepen link

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

Any help would be awesome!




Aucun commentaire:

Enregistrer un commentaire