Question

我有一个包含复选框列的表格，我添加了这个：

<th>
    <input type="checkbox" id="selectAll">
</th>

这是我的jQuery函数：

jQuery(document).ready(function() {
   jQuery('#selectAll').click(function(){ 
   jQuery("input[type='checkbox']").attr('checked', jQuery('#selectAll').is(':checked')); }) 
});

它在第一次检查时工作正常，但是当我取消选中并尝试再次检查时它不起作用！有什么理由不起作用？感谢

Answer 1

尝试使用.prop()和this.checked：

jQuery(document).ready(function() {
   jQuery('#selectAll').click(function(){ 
       jQuery("input[type='checkbox']").prop('checked', this.checked); 
    }) 
});

Answer 2

当您在jquery上选择id时，它会默认选择第一个元素，因此您的jQuery('#selectAll').is(':checked')将返回第一个元素的结果，请尝试使用selectAll类：

<th>
    <input type="checkbox" class="selectAll">
</th>



jQuery(document).ready(function() {
   jQuery('.selectAll').click(function(){ 
   jQuery("input[type='checkbox']").attr('checked', jQuery('.selectAll').is(':checked')); }) 
});

Answer 3

这应该有效：

$('input#selectAll').change(function(){

    $('input[type="checkbox"]').prop("checked",this.checked);

});

Fiddle DEMO

Answer 4

看看这个

<强> Working Demo

<强> HTML

<p><input type="checkbox" id="selectAll" /> Check/Uncheck All</p>
<hr/>
<p>
<input type="checkbox" class="chk" /> Checkbox  1
<input type="checkbox" class="chk" /> Checkbox  2
<input type="checkbox" class="chk" /> Checkbox  3
</p>

<强>脚本

$(document).ready(function () {
    $("#selectAll").click(function () {
        $("input[type='checkbox']").prop("checked", $("#selectAll").prop("checked"))
    })
});

Answer 5

尝试使用prop()而不是使用.attr()。

jQuery(document).ready(function() {
   jQuery('#selectAll').click(function(){ 
   jQuery("input[type='checkbox']").prop('checked', jQuery('#selectAll').is(':checked')); }) 
});

Working Example

属性和属性之间的区别非常重要具体情况。在jQuery 1.6之前，有时会使用.attr（）方法在检索某些属性时考虑了属性值，这可能会导致行为不一致。从jQuery 1.6开始，.prop（）方法提供了一种显式检索属性值的方法 .attr（）检索属性。

选中/取消选中表格中的所有复选框

5 个答案: