JS实现表格全选和取消全选

JS实现表单全选和取消全选

HTML部分

<div id="">
	<table border="" cellspacing="" cellpadding="">
	<thead>
		<tr>
			<th>
				<input type="checkbox" name="" id="chAll" value="" />
			</th>
			<th>商品</th>
			<th>价格</th>
		</tr>
	</thead>
	<tbody id="ch">
		<tr>
			<td>
				<input type="checkbox" name="" id="" value="" /></td>
			<td>商品一</td>
			<td>8000</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="" id="" value="" /></td>
			<td>商品二</td>
			<td>5000</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="" id="" value="" /></td>
			<td>商品三</td>
			<td>2000</td>
		</tr>
		<tr>
			<td>
				<input type="checkbox" name="" id="" value="" /></td>
			<td>商品四</td>
			<td>2000</td>
		</tr>
	</tbody>
	</table>
</div>

CSS部分

div{
	margin: 50px auto;
}
table{
	border-collapse:collapse;
}
th,td{
	border: 1px solid black;
	padding: 10px 40px;
}
thead>tr{
	background-color: #0088C9;
}
tbody>tr{
	background-color: #EEF1EE;
}
tbody>tr:hover{
	background-color: #F4F6F4;
}

最终的样子如下：

JS部分

首先给总的全选按钮绑定事件，如果他被选中了，则其他小按钮也是被选中的状态；若未被选中，则其他小按钮也是未被选中状态。

然后再给每个小按钮绑定事件，在该小按钮被点击后，则遍历所有的小按钮是否全都被选中或全都未被选中，再把状态赋给全选按钮。

// 获取元素
var chAll = document.getElementById('chAll'); //chAll是一个checkbox复选框
var chs = document.getElementById('ch').getElementsByTagName('input'); //选中表格主体部分所有的checkbox

// 给全选矿绑定click事件，获取chALL的状态(选中/非选中 即 this.checked)
chAll.onclick = function() {
	// console.log(this.checked);
	for(var i = 0; i<chs.length; i++){
		chs[i].checked = this.checked;
	}
}
// 每个小按钮绑定事件
for(var i = 0; i<chs.length; i++){
	chs[i].onclick = function() {
		var flag = true;
		for(var j = 0; j<chs.length; j++){
			if(!chs[j].checked){ //如果小按钮中有一个未被选中 则 flag = false
				flag = false;
			}
		}
		// 如果小按钮全部被选中，则flag = true
		// 把flag的值给全选框
		chAll.checked = flag;
	}
}