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>
复选框的个别选择就直接选择，不多比比；点击全选/全不选复选框，页面内容全部选中，对应代码中inputS[0]，通过change()函数去设置input标签的checked属性，当checked属性为true时，复选框为选中状态，为false时，处于未选中状态；当一个复选框发生变化时，要响应全组件，检查每个元素的checked属性，通过n和inputS.length比较，来决定全选复选框是否处于选中状态；反选复选框实现较为简单，将除了全选框之外的所有复选框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中实现方法
<!--ngFor中定义变量是需要获取index,比如选择某个复选框的时候需要根据index来确定到底选择了那个--><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;}}}
