一次切换多个复选框
Toggle multiple Checkbox at once
我有这些复选框:
'<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">'
当单击复选框选中或取消选中所有复选框"可切换"时,执行的JS代码是什么?
下面是如何在纯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">
试试
$(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">
通过JS验证是否检查了特定的checkbox
。它必须检查所有这些
JS Demo如下:UPDATE
刚刚将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
相关文章:
- 复选框:一次只允许单击一个复选框
- 复选框一次选中一个不在gridview中工作
- 复选框一次选中一个不起作用
- 在一组复选框中,一次只允许选择一个
- 使用javascript选中“计算总数一次”复选框
- 页面加载时复选框只选中一次?ASP.NET,C#
- 一次选中4个复选框,然后将页面重定向到新页面
- jQuery检查所有复选框只工作一次
- jQuery复选框组选中/取消选中仅工作一次
- 如何在 Firefox 中单击另一个复选框时一次取消选择多个复选框
- Javascript:同时启用 2 个文本框,单击一次复选框
- 复选框多次选中以选择值
- 一次添加一个项目到“;推车”;在Django、Ajax和Jquery中使用复选框
- ExtJS-3,Ext.grid.GridPanel,多行复选框:如何一次提交所有选中的项目
- Ext.grid.EditorGridPanel中的复选框(单击一次可触发编辑后事件)
- Javascript启用禁用复选框,单击,一次只选择一个
- 只计数一次复选框类
- 一次切换多个复选框
- 当父复选框被选中时,我试图选中所有子复选框.但这只适用一次!当我下次尝试时,孩子没有被检查
- 如何将选中的复选框一次限制为一个