javascript - 如果使用 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>

上面的代码运行良好。但这里下面的部分是检查 checkboxes 的 CSS 以应用条件。我想检查 checkboxes 的名称。寻找解决方案？

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

Answer 1

1. 当 change 事件冒泡时，您可以在父元素上addEventListener。
2. 使用 find() 检查是否有一个输入未被选中。
3. 如果您想按名称选择，请使用 input[name="testc"]
4. 如果检查了某些输入，#select_all 状态如何？

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. */ 
})

此处解决/* 4.*/的更强示例:https://codepen.io/yukulele/pen/PNNdvw?editors=0010