javascript - 选中/取消选中所有复选框

Question

我见过许多选中/取消选中所有复选框的脚本。但大多数人并不尊重，如果我使用“全部选中”复选框切换所有复选框，然后取消选中列表中的一个复选框，“全部选中”复选框仍处于选中状态。

有没有一种优雅的方式来处理这种情况？

Answer 1

$('#checkAll').click(function() {
    if(this.checked) {
        $('input:checkbox').attr('checked', true);
    }
    else {
        $('input:checkbox').removeAttr('checked');
    }
});

$('input:checkbox:not(#checkAll)').click(function() {
    if(!this.checked) {
        $('#checkAll').removeAttr('checked');
    }
    else {
        var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
        var numTotal = $('input:checkbox:not(#checkAll)').length;
        if(numTotal == numChecked) {
            $('#checkAll').attr('checked', true);
        }
    }
});

演示:http://jsfiddle.net/ThiefMaster/HuM4Q/

正如问题评论中指出的那样，常规复选框对此并不完美。只要一个 复选框未选中，我的实现就会禁用“全部选中”框。因此，要取消选中所有仍处于选中状态的复选框，您必须单击两次(首先重新选中未选中的复选框，然后取消选中所有其他复选框)。但是，对于三态复选框，这可能仍然是必要的，因为状态顺序可能是未选中->不确定->选中->未选中，因此您需要单击两次才能从不确定变为未选中。

---

因为您可能不想用“全选”检查页面上的所有复选框，请将 input:checkbox 替换为例如.autoCheckBox 或 input.autoCheckBox:checkbox 并赋予这些复选框 class="autoCheckBox"。

如果您想要某个表单中的所有复选框，只需使用 #idOfYourForm input:checkbox 或 form[name=nameOfYourForm] input:checkbox