时间戳

首页 > 解决方案 > 如果使用javascript选中了其他复选框，如何选中一个复选框？

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

问题描述

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>

上面的代码工作正常。但这里下面的部分是检查CSS应用checkboxes条件的。我想检查的名称checkboxes。寻找解决方案？

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

标签： javascriptjqueryhtmlcss

解决方案

  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

推荐阅读