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/

正如问题评论中指出的那样，常规复选框并不适用于此。一旦取消选中 one 复选框，我的实现就会禁用“全部检查”框。因此，要取消选中所有仍然选中的复选框，您必须单击两次（首先重新检查未选中的复选框，然后取消选中所有其他复选框）。但是，使用三态复选框时，这可能仍然是必要的，因为状态顺序可能未选中 - ＆gt; indefinite-＆gt; checked-＆gt;取消选中，因此您需要两次点击来无限期地取消选中。

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

复选框

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

Answer 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(){...} );

Answer 3

也许是这样的：

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

这假定#checkAll位于表格的thead部分。

Answer 4

$("#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 个答案: