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

【问题标题】：Check/Uncheck all checkboxes选中/取消选中所有复选框
【发布时间】：2011-06-15 20:36:33
【问题描述】：

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

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

【问题讨论】：

从 UI 的角度来看，您可能需要 three state checkbox，以便您可以将 some-on-some-off 的情况显示为其他内容。但是你必须在 HTML 中伪造这些，或者至少 The first example there 可以开箱即用，虽然不是在 jQuery 中，并且为每个状态使用单独的图像而不是一个 + CSS。
另一个替代示例：jsfiddle.net/Raynos/mSFts
@Raynos：很好，但是在手动检查所有复选框时它不会检查“全选”。
从未想过三态复选框。有趣。 :-)
@ThiefMaster 未被请求。

【解决方案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/

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

由于您可能不想用“全选”来选中页面上的所有复选框，请将 input:checkbox 替换为例如.autoCheckBox 或 input.autoCheckBox:checkbox 并提供这些复选框 class="autoCheckBox"。

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

【讨论】：

【解决方案2】：

您可以通过将单击处理程序附加到每个目标复选框来实现此目的，并让该处理程序根据这些目标复选框的集体状态取消选中“控制”复选框。所以，是这样的：

// Control checks/unchecks targets
$('#controlcheckbox').click( function(){
  $('.targetcheckboxes').attr('checked', this.checked );
});

// Targets affect control
$('.targetcheckboxes').click( function(){
  if( $('.targetcheckboxes:not(:checked)').length ){
    $('#controlcheckbox').attr('checked',false);
  }
});

更好——您可以将此逻辑附加到封闭容器元素，并使用.delegate() 监视事件：

$('#some_container').delegate('.targetcheckboxes','click',function(){...} );

【讨论】：

【解决方案3】：

$("#selectall").click(function(){
    var checked = $("#selectall").attr("checked");
    $(".selectone").attr("checked",checked);
});

设置全选

 $(".selectone").click(function(){
   var net = $(".selectone").map(function(){ return jQuery(this).attr("checked");}).get();
   var flg = true;
   if(jQuery.inArray(false, net)){
     flg= false;
   }
   $("#selectall").attr("checked",flg);
 });

【讨论】：

【解决方案4】：

大概是这样的：

$('tbody input:checkbox').change(function(){
    if ($(this).closest('tbody').find('input:checkbox').not(':checked').length) {
        $('#checkAll')[0].checked = false;
    }
});

这假定#checkAll 在您的表格的thead 部分中。

【讨论】：