全选/取消所有复选框

Question

我看到了很多选中/取消所有复选框的脚本。但是大多数并没有考虑到如果我使用“全选”复选框切换了所有复选框，然后在列表中取消一个复选框，那么“全选”复选框仍然被选中。

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

- janhartmann

---

从用户界面的角度来看，您可能希望使用三态复选框，以便可以将部分选中和未选中的情况显示为其他内容。但在HTML中，您需要伪造这些控件（至少在版本5以下需要）。我曾经使用过一个很好的实现，但它不是那个问题中的答案之一——虽然我不记得它在哪里了。那里的第一个示例可以直接做到这一点，尽管不使用jQuery，而是使用单独的图像来表示每个状态而不是一个加CSS的图像。 - Rup

另一个可选示例：http://jsfiddle.net/Raynos/mSFts/ - Raynos

@Raynos：不错，但是当手动选择所有复选框时它没有选中“全选”复选框。 - ThiefMaster

从未想过三态复选框。有趣。 :-) - janhartmann

@ThiefMaster 这不是被要求的。 - Raynos

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 即可。

- ThiefMaster

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

- Ken Redler

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

- Harish

Answer 4

也许是这样的：

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

假设您的表格中的#checkAll位于thead部分。

- lonesomeday