如果使用javascript选中其他复选框，如何选中一个复选框？

Question

 var select_all = document.getElementById("select_all"); //select all checkbox var checkboxes = document.getElementsByName("testc"); //checkbox items //select all checkboxes select_all.addEventListener("change", function(e) { for (i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = select_all.checked; } }); for (var i = 0; i < checkboxes.length; i++) { checkboxes[i].addEventListener('change', function(e) { //".checkbox" change //uncheck "select all", if one of the listed checkbox item is unchecked if (this.checked == false) { select_all.checked = false; } //check "select all" if all checkbox items are checked if (document.querySelectorAll('.checkbox:checked').length == checkboxes.length) { select_all.checked = true; } }); }

 <li><input type="checkbox" id="select_all" /> Selecct All</li> <ul> <li><input class="checkbox" type="checkbox" name="testc"> This is Item 1</li> <li><input class="checkbox" type="checkbox" name="testc"> This is Item 2</li> <li><input class="checkbox" type="checkbox" name="testc"> This is Item 3</li> <li><input class="checkbox" type="checkbox" name="testc"> This is Item 4</li> <li><input class="checkbox" type="checkbox" name="testc"> This is Item 5</li> <li><input class="checkbox" type="checkbox" name="testc"> This is Item 6</li> </ul>

The above code is working fine. but here the part below is checking the CSS of the checkboxes to apply the condition. i want to check the name of the checkboxes . Looking for a solution ?

//check "select all" if all checkbox items are checked
 if (document.querySelectorAll('.checkbox:checked').length == checkboxes.length) {
     select_all.checked = true;
     }
 });

Answer 1

1. While change event bubble you can addEventListener on parent element.
2. Use find() to check if one input is not checked.
3. If you want to select by name use input[name="testc"]
4. What about #select_all state if some inputs are checked?

var checkall = document.getElementById("select_all")
var ul = document.querySelector('ul#checkbox-list')
var checkboxes = Array.from(ul.querySelectorAll('input[name="testc"]')) /* 3 */

checkall.addEventListener('change', () => {
  checkboxes.forEach(elm => (elm.checked = checkall.checked))
})

ul.addEventListener('change', () => { /* 1. */ 
  checkall.checked = !checkboxes.find(elm => !elm.checked) /* 2. */ 
})

stronger example here solving /* 4. */ : https://codepen.io/yukulele/pen/PNNdvw?editors=0010

Answer 2

If you want to check the checkboxes by their names then change the selector inside querySelectorAll

if (document.querySelectorAll('[name="testc"]:checked').length == checkboxes.length) {
     select_all.checked = true;
}