本文参考了jQuery实现CheckBox全选、全不选原文和原文评论
需求:
在多选框中设置一个全选的选择框。当全选的选择框选中时,其余所有的选择框都选中;当全选的选择框不选中(点击全选框时)的时候,其余的选择框都不选中。
当其余的选择框都选中时,全选的那个选择框自动选中,当其余的选择框有一个或以上的选择框不选中(点击其余的选择框时)时,全选的那个选择框不选中。
实现方法:
对于需求1,可以在全选的选择框加上一个click事件处理函数:
$("#select-all").click(function(){
$("input[name='select']").prop("checked",this.checked);
});
prop:当元素的属性只有属性名(存在属性名就生效)或属性只有true和false两个值时,使用prop。
对于需求2,可以在选项不多的情况下监听其余所有选项的点击事件:
$("input[name='select']").click(function(){
var $subs=$("input[name='select']");
$("#select-all").prop("checked", $subs.length == $subs.filter(":checked").length ? true : false);
});
filter:用于根据条件筛选调用者的集合,本例中用于筛选选中的状态的多选框。
":checked":用于选择选中状态的input元素,关于jquery选择器可参考jQuery 参考手册 - 选择器
最后,全选的选择框不能加上name属性(至少不能是和子项相同的name属性)