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