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

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

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

$('#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);
        }
    }
});

Demo: http://jsfiddle.net/ThiefMaster/HuM4Q/ http://jsfiddle.net/ThiefMaster/HuM4Q/

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

由于您可能不想使用“全部选中”来选中页面上的所有复选框，因此请将input:checkbox例如.autoCheckBox or input.autoCheckBox:checkbox并给出这些复选框class="autoCheckBox".

如果您希望所有复选框都在某种形式内，只需使用#idOfYourForm input:checkbox or form[name=nameOfYourForm] input:checkbox