一次切换多个Checkbox

Question

我有这些复选框:

'<input type="checkbox" name="checkBox1" value="checked" class= "toggleable">'; 
'<input type="checkbox" name="checkBox2" value="checked" class= "toggleable">'; 
'<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">'; 

我可以通过叮叮当当来检查或取消选中.
现在我正在尝试添加一个复选框,单击时将立即选中或取消选中所有以前的复选框.

'<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">'

单击复选框以立即选中或取消选中所有复选框"toggleable"时要执行的JS代码是什么？

Answer 1

这是一个如何在纯JavaScript中使用它的示例.

var checkAll = document.getElementById("id_check_uncheck_all");
checkAll.addEventListener("change", function() {
  var checked = this.checked;
  var otherCheckboxes = document.querySelectorAll(".toggleable");
  [].forEach.call(otherCheckboxes, function(item) {
    item.checked = checked;
  });
});

<label for="id_check_uncheck_all">Select All</label>
<input type="checkbox" name="check_uncheck_all" value="false" id="id_check_uncheck_all">
<br/>

<input type="checkbox" name="checkBox1" value="checked" class= "toggleable"> 
<input type="checkbox" name="checkBox2" value="checked" class= "toggleable"> 
<input type="checkbox" name="checkBox3" value="checked" class= "toggleable">