全选按钮

全选按钮的实现

全选按钮是最基础的对dom树操作的例子，在平时的网页游览过程中有不少这样的例子，比如淘宝京东商城的购物车内，
当我们点击全选按钮，购物车内的所有单品会被选中。
再次单击全选按钮时，购物车内所有的单品会被取消选中。
在全选状态下，任意一个单选按钮被取消时，全选按钮都将被取消选中。
在未全选的状态下，所有单选按钮都选中时，全选按钮选中。

思路：

可以总结为查找到可以操作的对象，给查找到的对象添加操作。通过DOM树找到两种按钮，绑定相应的响应函数。

具体实现：

这个功能中，可以操作全选按钮，单选按钮变动，也可以是操作单选按钮全选按钮变动，所以我们第一步要进行的是查找到两种按钮：

// 通过选择器查找到全选按钮
var chbAll = document.querySelector('table>thead th:first-child>input')
// 通过选择器查找到单选按钮的集合
var chbs = document.querySelectorAll('table>tbody td:first-child>input'); 

单击全选按钮时的情况，给全选按钮绑定单击事件

// 给chbAll绑定单击事件
chbAll.onclick = function(){
	// 遍历chbs
	for(var i = 0; i < chbs.length; i++){	
		// 将所有的chb设置为与chbAll相同
		chbs[i].checked = this.checked;
	}
}

单击单选按钮时的情况，给所有的单选按钮绑定单击事件

// 遍历chbs
for(var i = 0; i < chbs.length; i++){
	// 给chbs绑定单击事件
	chbs[i].onclick = function(){
		// 如果当前单选按钮的checken是false
		if(!this.checked){
			// 将chbAll属性设置为false
			chbAll.checked = false;
		}else{
			// 获得没选中的单选按钮集合
			var chkds = document.querySelectorAll('table>tbody td:first-child>input:not(:checked)');
			// 如果获取的数组的长度为0说明没有未选中的
			if(chkds.length === 0){
				chbAll.checked = true;
			}else{// 否则说明有未被选中的
				chbAll.checked = false;
			}
		}
	}
}

下面是html页面代码

<table border="1px" width="500px" cellspacing="0">
	<thead>
		<tr>
			<th><input type="checkbox"/>全选</th>
			<th>管理员ID</th>
			<th>姓名</th>
			<th>操作</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td><input type="checkbox" name="adminID"/></td>
			<td>1</td>
			<td>Tester</td>
			<td></td>
		</tr>
		<tr>
			<td><input type="checkbox" name="adminID"/></td>
			<td>2</td>
			<td>Manager</td>
			<td></td>
		</tr>
		<tr>
			<td><input type="checkbox" name="adminID"/></td>
			<td>3</td>
			<td>Analyst</td>
			<td></td>
		</tr>
		<tr>
			<td><input type="checkbox" name="adminID"/></td>
			<td>4</td>
			<td>Admin</td>
			<td></td>
		</tr>
	</tbody>
</table>