javascript 检查所有复选框 jquery
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14925874/
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
checking all checkboxes jquery
提问by Taylor Gomez
Why in my js code can just with one click on name:check_allchecking all checkboxes?
为什么在我的 js 代码中只需单击一下即可name:check_all选中所有复选框？
HTML:
HTML：
<div id="ss">
<input type="checkbox" name="check_all">
</div>
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
<input type="checkbox" name="checked" class="idRow">
jQuery:
jQuery：
$(document).on('click change','input[name="check_all"]',function() {
var checkboxes = $('.idRow');
if($(this).is(':checked')) {
checkboxes.attr("checked" , true);
} else {
checkboxes.attr ( "checked" , false );
}
});
DEMO:http://jsfiddle.net/KdaZr/
演示：http : //jsfiddle.net/KdaZr/
My jQuery version is 1.9.
我的 jQuery 版本是 1.9。
How can fix it?
如何解决？
回答by undefined
Use propmethod. When your markup is rendered attributes become properties of the elements, using JavaScript you should modify properties of the element.
使用prop方法。当您的标记呈现属性成为元素的属性时，您应该使用 JavaScript 修改元素的属性。
$(document).on('change','input[name="check_all"]',function() {
$('.idRow').prop("checked" , this.checked);
});
Note that if input[name="check_all"]is not generated dynamically there is no need to delegate the event.
请注意，如果input[name="check_all"]不是动态生成的，则无需委托事件。
回答by Explosion Pills
Use .prop, not .attr, to change properties of elements. .attris for HTML attributes.
使用.prop而非.attr来更改元素的属性。 .attr用于 HTML 属性。
回答by Mudaser Ali
fix is as follow:-
修复如下：-
$(document).on('click change','input[name="check_all"]',function() {
var checkboxes = $('.idRow');
if($(this).is(':checked')) {
checkboxes.each(function(){
this.checked = true;
});
} else {
checkboxes.each(function(){
this.checked = false;
});
}
});
回答by SSR
A complete solution select || deselect checkbox jQuery :
一个完整的解决方案 select || 取消选择复选框 jQuery ：
$(document).ready(function() {
$("#checkedAll").change(function(){
if(this.checked){
$(".checkSingle").each(function(){
this.checked=true;
})
}else{
$(".checkSingle").each(function(){
this.checked=false;
})
}
});
$(".checkSingle").click(function () {
if ($(this).is(":checked")){
var isAllChecked = 0;
$(".checkSingle").each(function(){
if(!this.checked)
isAllChecked = 1;
})
if(isAllChecked == 0){ $("#checkedAll").prop("checked", true); }
}
else {
$("#checkedAll").prop("checked", false);
}
});
});
Html should be :
Html 应该是：
Single check box on checked three checkbox will be select and deselect.
选中的三个复选框上的单个复选框将被选中和取消选中。
<input type="checkbox" name="checkedAll" id="checkedAll"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
<input type="checkbox" name="checkAll" class="checkSingle"></input>
Hope this helps to someone as it did for me.
希望这对某人有帮助，就像对我一样。
