[英]Check/Uncheck all checkboxes
I've seen many check/uncheck all checkboxes scripts. 我见过很多检查/取消选中所有复选框脚本。 But far most does not respect that if I toggled all checkboxes using the "checked all"-checkbox and then uncheck a single one in the list, the "checked all" checkbox is still checked. 但是大多数人并不尊重如果我使用“全部选中” - 复选框切换所有复选框,然后取消选中列表中的单个复选框,则仍会选中“全部选中”复选框。
Is there an elegant way of handling this case? 处理这种情况有一种优雅的方式吗?
$('#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);
}
}
});
Demo: http://jsfiddle.net/ThiefMaster/HuM4Q/ 演示: http : //jsfiddle.net/ThiefMaster/HuM4Q/
As pointed out in the question's comment, a regular checkbox is not perfect for this. 正如问题评论中指出的那样,常规复选框并不适用于此。 My implementation disables the "check all" box as soon as one checkbox is unchecked. 只要取消选中一个复选框,我的实现就会禁用“全部检查”框。 So, to uncheck all still-checked checkboxes you'll have to click twice (first to re-check the unchecked ones and then to uncheck all other ones). 因此,要取消选中所有仍然选中的复选框,您必须单击两次(首先重新检查未选中的复选框,然后取消选中所有其他复选框)。 However, with a tri-state checkbox this might still be necessary as the state order might be unchecked->indefinite->checked->unchecked, so you'd need two clicks to come from indefinite to unchecked. 但是,使用三态复选框时,这可能仍然是必要的,因为状态顺序可能未选中 - >无限期 - >选中 - >未选中,因此您需要两次单击才能无限期地取消选中。
Since you probably don't want to check ALL checkboxes on your page with "Check All", replace input:checkbox
with eg .autoCheckBox
or input.autoCheckBox:checkbox
and give those checkboxes class="autoCheckBox"
. 由于您可能不想使用“全部检查”检查页面上的所有复选框,因此请将input:checkbox
替换为例如.autoCheckBox
或input.autoCheckBox:checkbox
,并将这些复选框class="autoCheckBox"
。
If you want all checkboxes inside a certain form, simple use #idOfYourForm input:checkbox
or form[name=nameOfYourForm] input:checkbox
如果您想要某个表单中的所有复选框,只需使用#idOfYourForm input:checkbox
或form[name=nameOfYourForm] input:checkbox
You can achieve this by attaching a click handler to each of the target checkboxes, and have that handler un-check the "control" checkbox based on the collective state of those target checkboxes. 您可以通过将单击处理程序附加到每个目标复选框来实现此目的,并让该处理程序根据这些目标复选框的集合状态取消选中“控制”复选框。 So, something like this: 所以,像这样:
// 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);
}
});
Even better -- you could attach this logic to an enclosing container element, and watch for the event using .delegate()
: 更好的是 - 您可以将此逻辑附加到封闭的容器元素,并使用.delegate()
监视事件:
$('#some_container').delegate('.targetcheckboxes','click',function(){...} );
Perhaps something like this: 也许是这样的:
$('tbody input:checkbox').change(function(){
if ($(this).closest('tbody').find('input:checkbox').not(':checked').length) {
$('#checkAll')[0].checked = false;
}
});
This assumes that #checkAll
is in the thead
section of your table. 这假设#checkAll
位于表的thead
部分。
$("#selectall").click(function(){
var checked = $("#selectall").attr("checked");
$(".selectone").attr("checked",checked);
});
For setting select all 用于设置全选
$(".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);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.