0

我在尝试创建“全选”框时遇到了一个小问题。

它的工作原理，第一次。多次执行此操作（例如打开，关闭和再次打开）时，它不再选中该框！

HTML

<label><input type='checkbox' id='CheckAll' />Click me!</label><br />
<br />
<input type='checkbox' name='Checks' value='1' /><br />
<input type='checkbox' name='Checks' value='2' /><br />
<input type='checkbox' name='Checks' value='3' /><br />
<input type='checkbox' name='Checks' value='4' /><br />
<input type='checkbox' name='Checks' value='5' />

jQuery

$('#CheckAll').change(function() { 
    var $Checked = $(this).prop('checked'); 
    if ($Checked === true) { 
        $(document).find('input:checkbox[name=\'Checks\']').prop('checked', true); 
    } else { 
        $(document).find('input:checkbox[name=\'Checks\']').removeProp('checked'); 
    } 
});

我已经在 J​​SFiddle 中重现了这个问题：http: //jsfiddle.net/aTW8Y/1/

我是否忽略了某些东西或试图以.prop()错误的方式使用该物业？

4

5 回答 5

2

Use .prop("checked", false); instead of removeProp:

$('#CheckAll').change(function() { 
    $(document).find('input:checkbox[name=\'Checks\']')
               .prop('checked', $(this).prop('checked')); 
});

From the docs:

jQuery first assigns the value undefined to the property and ignores any error the browser generates. In general, it is only necessary to remove custom properties that have been set on an object, and not built-in (native) properties

Updated fiddle

于 2013-10-15T11:26:00.100 回答
1

http://jsfiddle.net/aTW8Y/5/

改用prop('checked', false)！

于 2013-10-15T11:31:02.737 回答
1

You're removing the checked property, you should just set it to false instead:

$(document).find('input:checkbox[name=\'Checks\']').prop('checked', false);

Fiddle

于 2013-10-15T11:26:11.207 回答
1

首先，您应该使用prop('checked', false)删除检查，其次您可以将逻辑简化为 1 行：

$('#CheckAll').change(function() { 
    $('input:checkbox[name=\'Checks\']').prop('checked', $(this).prop('checked'));
});

示例小提琴

于 2013-10-15T11:28:55.490 回答
1

正如removeProp()文档所述：

注意：请勿使用此方法删除本机属性，例如选中、禁用或选中。这将完全删除该属性，并且一旦删除，就不能再次将其添加到元素中。使用 .prop() 将这些属性设置为 false。

在调用removeProp()时，您checked从复选框中完全删除了该属性。取而代之的是，只需使用prop()将值设置为false：

$(document).find('input:checkbox[name=\'Checks\']').prop('checked', false);

工作 JSFiddle 演示。

于 2013-10-15T11:27:03.007 回答