全选和反选

全选和反选

效果如下：


代码如下：
css部分

<style>
body {
	margin: 0px;
	padding: 0px;
}
.wrap {
	width: 300px;
	margin: 100px auto;
}
table {
	border-collapse: collapse;
	border-spacing: 0px;
	border: 1px solid #c0c0c0;
	width: 300px;
}
th,td {
	border: 1px solid #d0d0d0;
	padding: 10px;
	color: #404060;
}
th {
	background: #09c;
	font: 700 16px "microsoft yahei";
	color: #fff;
}
td {
	font: 14px "microsoft yahei";
}
tbody tr {
	background-color: #f0f0f0;
}
tbody tr:hover {
	cursor: pointer;
	background-color: #fafafa;
}
</style>

body部分

<div class="wrap">
	<table>
		<thead>
			<tr>
				<th><input type="checkbox" id="inpTop"></th>
				<th>菜名</th>
				<th>饭店</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td><input type="checkbox"></td>
				<td>地三鲜</td>
				<td>小王河</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>西红柿炒鸡蛋</td>
				<td>小王河</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>醋溜土豆丝</td>
				<td>小王河</td>
			</tr>
			<tr>
				<td><input type="checkbox"></td>
				<td>韭菜盒子</td>
				<td>小王河</td>
			</tr>
		</tbody>
	</table>
</div>
<script>
//需求1：从上至下，当点击全选按钮时，下面四个多选框全部选中，再点击取消全选。
var inpTop = document.getElementById("inpTop");
var tbody = document.getElementsByTagName("tbody")[0];
var inpArr = tbody.getElementsByTagName("input");
inpTop.onclick = function(){
	for(var i=0; i<inpArr.length; i++){
		inpArr[i].checked = this.checked;
	}
}
//需求2：当下面全选的时候，上面的全选按钮也被选中，如果有一个没选中，则全选按钮也不被选中。
for(var i=0; i<inpArr.length; i++){
	inpArr[i].onclick = function(){
		//开闭原则
		var bool = true;
		for(var j=0; j<inpArr.length; j++){
			if(inpArr[j].checked === false){
				bool = false;
			}
		}
		inpTop.checked = bool;
	}
}
</script>