一次切换多个复选框答案

【问题标题】：Toggle multiple Checkbox at once一次切换多个复选框
【发布时间】：2015-12-07 05:54:48
【问题描述】：

我有这些复选框：

'<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代码是什么？

【问题讨论】：

只需添加一个事件处理程序，单击该事件处理程序将选择其余框并更改其.checked 状态以匹配其自己的状态。很简单。这不是代码编写服务。你写了什么，你卡在哪里了？

标签： javascript html checkbox onclick

【解决方案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">

【讨论】：

不错。仅供参考，如果您在回调之后将this 作为参数传递，那么它会更短一些，然后执行item.checked = this.checked。
@squint 不错的提示——我从没想过那样做。我将保留答案，因为我认为这对新手来说更简单。
@user1106925 我不明白你在说什么，你介意修改 dave 的代码并说明你的意思吗？

【解决方案2】：

试试看

$(document).ready(function() {
  
    $(".toggleable").click(function() {
      
        var checkboxes = $(".toggleable");
      
        if($(this).prop("checked")) checkboxes.prop("checked",true);
        else checkboxes.prop("checked",false);
      
    })
    
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

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

【讨论】：

【解决方案3】：

只需通过 JS 验证是否有特定的checkbox 被选中。它必须检查所有这些。

下面的 JS 演示：更新

刚刚在您的输入中添加了id。

function checkAll(x) {
  if(x.checked == true){
  	document.getElementById('c1').checked = true;
  	document.getElementById('c2').checked = true;
  	document.getElementById('c3').checked = true;      
  }else{
  	document.getElementById('c1').checked = false;
  	document.getElementById('c2').checked = false;
  	document.getElementById('c3').checked = false;    
  }
}

Multiple Check Box Below:
<br>
<input type="checkbox" name="checkBox1" value="checked" class="toggleable" id="c1">
<input type="checkbox" name="checkBox2" value="checked" class="toggleable" id="c2">
<input type="checkbox" name="checkBox3" value="checked" class="toggleable" id="c3">
</br>
Check below to Check them all:
</br>
<input type="checkbox" name="check_uncheck_all" onchange='checkAll(this);' value="false" id="id_check_uncheck_all">

jQuery 演示如下：

$('#checkAll').click(function () {    
     $('input:checkbox').prop('checked', this.checked);    
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="checkbox" id="checkAll" > Check All
</br>
<input type="checkbox" id="checkItem"> Item 1
<input type="checkbox" id="checkItem"> Item 2 
<input type="checkbox" id="checkItem"> Item3

【讨论】：

我没有看到任何迹象表明 OP 正在使用 jQuery。您不需要大型库来完成简单的任务。
@squint 我的错，你一定只是有我会知道的评论。