多选框全选

本文参考了jQuery实现CheckBox全选、全不选原文原文评论

需求:

  1. 在多选框中设置一个全选的选择框。当全选的选择框选中时,其余所有的选择框都选中;当全选的选择框不选中(点击全选框时)的时候,其余的选择框都不选中。

  2. 当其余的选择框都选中时,全选的那个选择框自动选中,当其余的选择框有一个或以上的选择框不选中(点击其余的选择框时)时,全选的那个选择框不选中。

实现方法:

对于需求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属性)

你可能感兴趣的:(多选框全选)