多选框全选

为什么80%的码农都做不了架构师？>>>   

本文参考了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属性）

转载于:https://my.oschina.net/hwxn/blog/524674