angular和js中分別实现checkbox复选框的全选，反选及个别选择

1. js中实现方法：

<form>
  	 <label class="title">
         <input type="checkbox" value="" name="tab" /><strong><span>全选span>strong>
     label>
     <span class="oppo">反选span>
     <label class="border">
         <input type="checkbox" value="" name="tab" /><span>选项（一）span>
     label>
     <label>
         <input type="checkbox" value="" name="tab" /><span>选项（二）span>
     label>
     <label>
         <input type="checkbox" value="" name="tab" /><span>选项（三）span>
     label>
     <label>
         <input type="checkbox" value="" name="tab" /><span>选项（四）span>
     label>
form>

1. 复选框的个别选择就直接选择，不多比比；
2. 点击全选/全不选复选框，页面内容全部选中，对应代码中inputS[0]，通过change()函数去设置input标签的checked属性，当checked属性为true时，复选框为选中状态，为false时，处于未选中状态；
3. 当一个复选框发生变化时，要响应全组件，检查每个元素的checked属性，通过n和inputS.length比较，来决定全选复选框是否处于选中状态；
4. 反选复选框实现较为简单，将除了全选框之外的所有复选框input的checked属性取反即可；

var inputS = document.getElementsByTagName("input");
var spanS = document.getElementsByTagName("span");
var opposites = document.getElementsByClassName("oppo")[0];
function isChockAll() {
    for (var i = 1 , n = 0; i < inputS.length; i++ ) {
        inputS[i].checked && n++;
    }
    inputS[0].checked = (n === inputS.length - 1);
    spanS[0].innerHTML= inputS[0].checked ? "全不选" : "全选";
}
function change(value) {
    for(var i = 1;i < inputS.length;i++) {
        inputS[i].checked = value;
    }
}
//全选或全不选
inputS[0].onclick = function () {
    if(this.checked){
        change(true);
    }else {
        change(false);
    }
    isChockAll();
};
//反选
opposites.onclick = function () {
    for (var i = 1; i < inputS.length; i++) {
        inputS[i].checked = !inputS[i].checked;
    }
    isChockAll();
};
//元素的变化影响全选件
for (var i = 1; i < inputS.length; i++) {
    inputS[i].onclick = function () {
        isChockAll();
    }
}

2. angular中实现方法

<div *ngFor="let dep of departs; let i = index">
  <label>
    <input type="checkbox" [(ngModel)]="dep.checked" (change)="checkEvent(dep, i)">
    {{dep.name}}
  label>
div>

departs = [
    {'name': '全选', checked: false},
    {'name': '张三', checked: false},
    {'name': '李四', checked: false},
    {'name': '王五', checked: false},
  ];

  checkEvent(item, i) {
    if (i === 0) {  // 如果点击的是第一个全选按钮，就实现全选取消全选
      if (item.checked) {
        this.departs.forEach(dep=>dep.checked = true);
      } else {
        this.departs.forEach(dep=>dep.checked = false);
      }
    } else {
      let res = this.departs.some(dep=>{return !dep.checked});
      if (res) {  // 如果全选以后，其中一个或多个取消选择，就把第一个全选按钮取消勾选
        this.departs[0].checked = false;
      }
      let flag = true;
      for (var n = 1; n < this.departs.length; n++) {
        if (!this.departs[n].checked) {
          flag = false;
        }
      }
      if (flag) {   // 如果全选以后，其他的全部选中了，就把全选按钮也选中
        this.departs[0].checked = true;
      }
    }
  }