jquery - 第二个“检查所有”功能不运行

Question

如果有一些未选中，我有一个应该检查所有复选框的功能。如果它们都被选中，那么将取消选中它们。

check all在您第三次单击该链接之前，它会按预期工作。

1. 首先单击检查所有
2. 第二次单击取消选中它们
3. 第三次点击应该再次检查它们，但没有

function CheckAll(name) {
    name = name.replace(/[[]/g, '\\[').replace(/]/g, '\\]');

    if ($('input[name=' + name + ']:checkbox:not(:checked)').length) {
        $('input[name=' + name + ']:checkbox:not(:checked)').attr('checked', true);
    } else {
        $('input[name=' + name + ']:checkbox:checked').attr('checked', false);
    }
}

简单的 HTML

    <a href="#" onclick="CheckAll('users[]')">Check All</a><br/><br/>
    <input type="checkbox" name="users[]" checked="checked"/><br/>
    <input type="checkbox" name="users[]"/><br/>
    <input type="checkbox" name="users[]"/><br/>
    <input type="checkbox" name="users[]"/><br/>
    <input type="checkbox" name="users[]"/><br/>
    <input type="checkbox" name="users[]"/><br/>
    <input type="checkbox" name="users[]"/><br/>
    <input type="checkbox" name="users[]"/><br/>
    <input type="checkbox" name="users[]"/><br/>
    <input type="checkbox" name="users[]"/><br/>

jsFiddle 链接

Answer 1

如果您使用的是 jquery 1.6+ ，则需要使用.prop()而不是.attr()

在该版本之后，属性的处理方式与属性不同，并且选中的是属性而不是属性。

发生了什么，是 .attr() 只检查属性是否存在，它不关心值是什么。true所以如果你使用 .attr()，checked="false" 仍然会返回。

如果您使用 .prop()，它将正确返回属性值，在我给出的示例中，该值将是错误的。

Answer 2

您已经建议使用prop() 而不是.attr(). 而且我认为您可以使用更少的代码来实现您的结果：

function CheckAll(name) {
    name = name.replace(/[[]/g, '\\[').replace(/]/g, '\\]'),
    checkboxes = 'input[name=' + name + ']:checkbox';
    $(checkboxes).prop('checked', $(checkboxes + ':checked').length !== $(checkboxes).length);
}