Javascript 使用 jQuery 选择所有复选框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14778364/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Select All checkboxes using jQuery
提问by Seyed Morteza Mousavi
I have the following html code:
我有以下 html 代码：
<input type="checkbox" id="ckbCheckAll" />
<p id="checkBoxes">
<input type="checkbox" class="checkBoxClass" id="Checkbox1" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox2" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox3" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox4" />
<br />
<input type="checkbox" class="checkBoxClass" id="Checkbox5" />
<br />
</p>
When user checks ckbCheckAllall checkboxes must be checked. Also I have following jquery code:
当用户ckbCheckAll选中所有复选框时，必须选中。另外我有以下jquery代码：
$(document).ready(function () {
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").attr('checked', this.checked);
});
});
When I see my page in the browser I get the following result:
In the first click on ckbCheckAllall checkboxes were checked (which is correct). In the second click on ckbCheckAllall checkboxes were unchecked (which is correct). But in 3rd attempt nothing happened! also in 4th attempt nothing happened and so on.
当我在浏览器中看到我的页面时，我得到以下结果：在第一次单击时，ckbCheckAll所有复选框都被选中（这是正确的）。在第二次单击ckbCheckAll所有复选框时都未选中（这是正确的）。但是在第三次尝试中什么也没发生！同样在第四次尝试中什么也没发生等等。
Where is the problem?
问题出在哪儿？
回答by dmk
Use prop
使用道具
$(".checkBoxClass").prop('checked', true);
or to uncheck:
或取消选中：
$(".checkBoxClass").prop('checked', false);
$("#ckbCheckAll").click(function () {
$(".checkBoxClass").prop('checked', $(this).prop('checked'));
});
Updated JSFiddle Link: http://jsfiddle.net/sVQwA/1/
更新 JSFiddle 链接：http: //jsfiddle.net/sVQwA/1/
回答by SachinSenger
Use below code..
使用下面的代码..
$('#globalCheckbox').click(function(){
if($(this).prop("checked")) {
$(".checkBox").prop("checked", true);
} else {
$(".checkBox").prop("checked", false);
}
});
$('.checkBox').click(function(){
if($(".checkBox").length == $(".checkBox:checked").length) {
//if the length is same then untick
$("#globalCheckbox").prop("checked", false);
}else {
//vise versa
$("#globalCheckbox").prop("checked", true);
}
});
回答by Majid Sayyed
Here is a simple way to do this :
这是一个简单的方法来做到这一点：
Html :
网址：
<input type="checkbox" id="selectall" class="css-checkbox " name="selectall"/>Selectall<br>
<input type="checkbox" class="checkboxall" value="checkbox1"/>checkbox1<br>
<input type="checkbox" class="checkboxall" value="checkbox2"/>checkbox2<br>
<input type="checkbox" class="checkboxall" value="checkbox3"/>checkbox3<br>
jquery :
查询：
$(document).ready(function(){
$("#selectall").click(function(){
if(this.checked){
$('.checkboxall').each(function(){
$(".checkboxall").prop('checked', true);
})
}else{
$('.checkboxall').each(function(){
$(".checkboxall").prop('checked', false);
})
}
});
});
回答by kenorb
Try the following simple code:
试试下面的简单代码：
$('input[type=checkbox]').each(function() { this.checked = true; });
Source: How to reset all checkboxes using jQuery or pure JS?
回答by Onur Topal
use this
用这个
if (this.checked)
$(".checkBoxClass").attr('checked', "checked");
else
$(".checkBoxClass").removeAttr('checked');
also you can use propplease check http://api.jquery.com/prop/
您也可以使用prop请检查http://api.jquery.com/prop/
回答by TanvirChowdhury
checkall is the id of allcheck box and cb-child is the name of each checkboxes that will be checked and unchecked depend on checkall click event
checkall 是所有复选框的 id，cb-child 是每个复选框的名称，根据 checkall 单击事件将被选中和取消选中
$("#checkall").click(function () {
if(this.checked){
$("input[name='cb-child']").each(function (i, el) {
el.setAttribute("checked", "checked");
el.checked = true;
el.parentElement.className = "checked";
});
}else{
$("input[name='cb-child']").each(function (i, el) {
el.removeAttribute("checked");
el.parentElement.className = "";
});
}
});
回答by Sandeep Yadav
jQuery( function($){
// add multiple select / deselect functionality
$("#contact_select_all").click(function () {
if($("#contact_select_all").is(":checked")){
$('.noborder').prop('checked',true);
}else
$('.noborder').prop('checked',false);
});
// if all checkbox are selected, check the selectall checkbox
$(".noborder").click(function(){
if($(".noborder").length == $(".noborder:checked").length) {
$("#contact_select_all").attr("checked", "checked");
} else {
$("#contact_select_all").removeAttr("checked");
}
});
});
回答by Nivetha Ravindran
$(document).ready(function(){
$('#ckbCheckAll').click(function(event) {
if($(this).is(":checked")) {
$('.checkBoxClass').each(function(){
$(this).prop("checked",true);
});
}
else{
$('.checkBoxClass').each(function(){
$(this).prop("checked",false);
});
}
});
});
回答by demenvil
$(document).ready(function () {
$(".class").on('click', function () {
$(".checkbox).prop('checked', true);
});
});
回答by Debendra Dash
Let i have the following checkboxes
让我有以下复选框
<input type="checkbox" name="vehicle" value="select All" id="chk_selall">Select ALL<br>
<input type="checkbox" name="vehicle" value="Bike" id="chk_byk">bike<br>
<input type="checkbox" name="vehicle" value="Car" id="chk_car">car
<input type="checkbox" name="vehicle" value="Bike" id="chk_bus">Bus<br>
<input type="checkbox" name="vehicle" value="scooty" id="chk_scooty">scooty
Here is the simple code to select all and diselect all when the selectall check box will click
这是当全选复选框将被单击时全选和取消全选的简单代码
<script type="text/javascript">
$(document).ready(function () {
$("#chk_selall").on("click", function () {
$("#chk_byk").prop("checked", true);
$("#chk_car").prop("checked", true);
$("#chk_bus").prop("checked", true);
$("#chk_scooty").prop("checked", true);
})
$("#chk_selall").on("click", function () {
if (!$(this).prop("checked"))
{
$("#chk_byk").prop("checked", false);
$("#chk_car").prop("checked", false);
$("#chk_bus").prop("checked", false);
$("#chk_scooty").prop("checked", false);
}
});
});
</script>
