当我选中所有复选框时如何选择所有复选框

Question

I want to select all checkbox checked when i select all checkboxes in my dropdown menu. I am a beginner js developer need help. This is my js code

var expanded = false;
function showCheckboxes() {
var checkboxes = document.getElementById("checkboxes");
if (!expanded) {
checkboxes.style.display = "block";
expanded = true;
} else {
checkboxes.style.display = "none";
expanded = false;
}
}
var selectallBox = document.getElementById('selectall');
var checkBoxes = document.querySelectorAll('.select-me');
selectallBox.addEventListener('click', function() {

for (var i = 0; i < checkBoxes.length; i++) {
    if (checkBoxes[i] != selectallBox)
        checkBoxes[i].checked = selectallBox.checked;
}


})
for (var i = 0; i < checkBoxes.length; i++) {
   checkBoxes[i].addEventListener('click', function() {

    selectallBox.checked = false; 
})
}
document.querySelector('.close-check-box').addEventListener('click' , function(){
checkboxes.style.display = 'none'
})

This is my js fiddle: https://jsfiddle.net/b9ueL3fw/

Answer 1

You can compare the total check box with the checked check box count, if both length are same then set check box checked property to true , otherwise set to false :

var selectedCount = document.querySelectorAll('.select-me:checked').length;
if(checkBoxes.length == selectedCount){
  selectallBox.checked = true;
}
else{
  selectallBox.checked = false; 
}

 var expanded = false; var selectBox = document.querySelector('.selectBox') selectBox.addEventListener('click', function(){ var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } }); var selectallBox = document.getElementById('selectall'); var checkBoxes = document.querySelectorAll('.select-me'); selectallBox.addEventListener('click', function() { for (let i = 0; i < checkBoxes.length; i++) { if (checkBoxes[i] != selectallBox) checkBoxes[i].checked = selectallBox.checked; } }) for (var i = 0; i < checkBoxes.length; i++) { checkBoxes[i].addEventListener('click', function() { var selectedCount = document.querySelectorAll('.select-me:checked').length; if(checkBoxes.length == selectedCount){ selectallBox.checked = true; } else{ selectallBox.checked = false; } }); } document.querySelector('.close-check-box').addEventListener('click' , function(){ checkboxes.style.display = 'none' })

 .multiselect { width: 400px; } .selectBox { position: relative; } .selectBox select { width: 100%; } .overSelect { position: absolute; left: 0; right: 0; top: 0; bottom: 0; } #checkboxes { display: none; border: 1px rgb(169, 169, 169) solid; padding-top: 10px; border-radius: 5px; margin-top: 10px; height: 200px; overflow-y: scroll; } label { display: block; } select { padding: 6px 12px; border-radius: 5px; } .close-check-box:link, .close-check-box:visited { padding: 1px 25px; text-decoration: none; font-weight: 300; background-color: #3498db; border: 1px solid #3498db; color: #fff; margin-left: 14px; box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12); margin-top: 10px; margin-bottom: 20px; display: inline-block; } hr.style-two { border: 0; height: 1px; background-image: linear-gradient(to right, rgba(169, 169, 169, 0), rgba(169, 169, 169, 0.75), rgba(169, 169, 169, 0)); }

 <form method="GET"> <div class="multiselect"> <div class="selectBox"> <select> <option>Select an option</option> </select> <div class="overSelect"></div> </div> <div id="checkboxes"> <label for="selectall"> <input type="checkbox" id="selectall" / class="mr-3 ml-3">Select All</label> <hr class="style-two"> <label for="one"> <input type="checkbox" name="checkbox1" value="1" id="one" / class="mr-3 ml-3 select-me">First</label> <label for="two"> <input type="checkbox" name="checkbox2" value="2" id="two" / class="mr-3 ml-3 select-me">Second</label> <label for="three"> <input type="checkbox" name="checkbox3" value="3" id="three" / class="mr-3 ml-3 select-me">First</label> <label for="four"> <input type="checkbox" name="checkbox4" value="4" id="four" / class="mr-3 ml-3 select-me">Second</label> <label for="five"> <input type="checkbox" name="checkbox5" value="5" id="five" / class="mr-3 ml-3 select-me">First</label> <label for="six"> <input type="checkbox" name="checkbox6" value="6" id="six" / class="mr-3 ml-3 select-me">Second</label> <label for="seven"> <input type="checkbox" name="checkbox7" value="7" id="seven" / class="mr-3 ml-3 select-me">First</label> <label for="eight"> <input type="checkbox" name="checkbox8" value="8" id="eight" / class="mr-3 ml-3 select-me">Second</label> <label for="nine"> <input type="checkbox" name="checkbox9" value="9" id="nine" / class="mr-3 ml-3 select-me">First</label> <label for="ten"> <input type="checkbox" name="checkbox10" value="10" id="ten" / class="mr-3 ml-3 select-me">Second</label> <a class="close-check-box" href="#">click</a> </div> </div> <button type="submit">submit</button> </form>

Answer 2

 var expanded = false; var selectBox = document.querySelector(".selectBox"); selectBox.addEventListener("click", function() { var checkboxes = document.getElementById("checkboxes"); if (!expanded) { checkboxes.style.display = "block"; expanded = true; } else { checkboxes.style.display = "none"; expanded = false; } }); let checkboxesCheckedCount = 0; var selectallBox = document.getElementById("selectall"); var checkBoxes = document.querySelectorAll(".select-me"); selectallBox.addEventListener("click", function() { for (var i = 0; i < checkBoxes.length; i++) { if (checkBoxes[i] != selectallBox) checkBoxes[i].checked = selectallBox.checked; checkboxesCheckedCount = selectallBox.checked ? checkBoxes.length : 0; } }); for (var i = 0; i < checkBoxes.length; i++) { checkBoxes[i].addEventListener("click", function() { selectallBox.checked = false; checkboxesCheckedCount = this.checked ? checkboxesCheckedCount +1 : checkboxesCheckedCount -1 if (checkboxesCheckedCount === checkBoxes.length) { selectallBox.checked = true; } }); } document .querySelector(".close-check-box") .addEventListener("click", function() { checkboxes.style.display = "none"; });

 .multiselect{width:400px}.selectBox{position:relative}.selectBox select{width:100%}.overSelect{position:absolute;left:0;right:0;top:0;bottom:0}#checkboxes{display:none;border:1px #a9a9a9 solid;padding-top:10px;border-radius:5px;margin-top:10px;height:200px;overflow-y:scroll}label{display:block}select{padding:6px 12px;border-radius:5px}.close-check-box:link,.close-check-box:visited{padding:1px 25px;text-decoration:none;font-weight:300;background-color:#3498db;border:1px solid #3498db;color:#fff;margin-left:14px;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);margin-top:10px;margin-bottom:20px;display:inline-block}hr.style-two{border:0;height:1px;background-image:linear-gradient(to right,rgba(169,169,169,0),rgba(169,169,169,.75),rgba(169,169,169,0))}

 <form method="GET"><div class="multiselect"><div class="selectBox"> <select><option>Select an option</option></select><div class="overSelect"></div></div><div id="checkboxes"><label for="selectall"> <input type="checkbox" id="selectall" / class="mr-3 ml-3">Select All</label><hr class="style-two"> <label for="one"> <input type="checkbox" name="checkbox1" value="1" id="one" / class="mr-3 ml-3 select-me">First</label> <label for="two"> <input type="checkbox" name="checkbox2" value="2" id="two" / class="mr-3 ml-3 select-me">Second</label> <label for="three"> <input type="checkbox" name="checkbox3" value="3" id="three" / class="mr-3 ml-3 select-me">First</label> <label for="four"> <input type="checkbox" name="checkbox4" value="4" id="four" / class="mr-3 ml-3 select-me">Second</label> <label for="five"> <input type="checkbox" name="checkbox5" value="5" id="five" / class="mr-3 ml-3 select-me">First</label> <label for="six"> <input type="checkbox" name="checkbox6" value="6" id="six" / class="mr-3 ml-3 select-me">Second</label> <label for="seven"> <input type="checkbox" name="checkbox7" value="7" id="seven" / class="mr-3 ml-3 select-me">First</label> <label for="eight"> <input type="checkbox" name="checkbox8" value="8" id="eight" / class="mr-3 ml-3 select-me">Second</label> <label for="nine"> <input type="checkbox" name="checkbox9" value="9" id="nine" / class="mr-3 ml-3 select-me">First</label> <label for="ten"> <input type="checkbox" name="checkbox10" value="10" id="ten" / class="mr-3 ml-3 select-me">Second</label><a class="close-check-box" href="#">click</a></div></div> <button type="submit">submit</button></form>