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

我已经看到很多检查/取消选中所有复选框脚本。但是绝大多数人并不尊重，如果我使用“全选”选项切换所有复选框，然后取消选中列表中的单个复选框，则“检查全部”复选框仍会被选中。选中/取消选中所有复选框

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

2011-01-26 janhartmann

从UI的角度来看，你可能想要一个[三状态复选框]（http://stackoverflow.com/questions/17260） 96/tri-state-check-box-in-html），这样你就可以将某种情况下的情况显示为其他内容。但是你必须用HTML来伪造这些，或者至少<5。我以前使用过一个很好的实现，但它不是这个问题的答案之一 - 不记得它在哪里。 [在那里的第一个例子]（http://shamsmi.blogspot.com/2008/12/tri-state-checkbox-using-javascript.html）可以做到这一点，虽然不是在jQuery中，并使用单独的图像为每个国家而不是一个+ CSS。 – Rup 2011-01-26 13:35:38

$('#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/

如问题的评论中指出，经常复选框不可为这个完美的。我的执行禁用“检查全部”框一个复选框未选中。因此，要取消选中所有仍然选中的复选框，您必须点击两次（首先重新选中未选中的复选框，然后取消选中所有其他选项）。但是，对于三态复选框，这可能仍然是必要的，因为状态顺序可能未被选中 - >无限期 - >选中 - >未选中，因此您需要两次点击才能从无限期进入未选中状态。

既然你可能不希望检查所有复选框在网页上以“全选”，以取代例如 .autoCheckBox或input.autoCheckBox:checkbox并给予那些复选框class="autoCheckBox"。

如果你想要某种形式内的所有复选框，简单的使用#idOfYourForm input:checkbox或form[name=nameOfYourForm] input:checkbox

来源

2011-01-26 13:30:23 ThiefMaster

也许是这样的：

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

这假定#checkAll是表中的thead部分。

来源

2011-01-26 13:31:33 lonesomeday

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

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

来源

2011-01-26 13:31:54

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

来源

2011-01-26 13:56:56 Harish

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

回答

相关问题