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

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