表单的全选取消全选

<div class="wrap">
			<table border="1" cellspacing="0" cellpadding="0">
				<caption>恭喜发财</caption>
				<thead>
					<tr>
						<th><input type="checkbox" id="j_cbAll" checked="checked"/></th>
						<th>商品</th>
						<th>价钱</th>
					</tr>
				</thead>
				<tbody id="j_tb">
					<tr>
						<td>
							<input type="checkbox"/>
						</td>
						<td>苹果</td>
						<td>8000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox"/>
						</td>
						<td>华为</td>
						<td>9000</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox"/>
						</td>
						<td>小米</td>
						<td>19999</td>
					</tr>
					<tr>
						<td>
							<input type="checkbox"/>
						</td>
						<td>小米+</td>
						<td>20000</td>
					</tr>
				</tbody>
			</table>
		</div>

<style type="text/css">
			table{
				width: 200px;
				margin: 50px auto;
				text-align: center;
				border-collapse: collapse; 
				/* border-collapse: collapse;  改变线性 */
				font-size: 14px;
			}
			thead tr{
				color: white;
				height: 30px;
				background-color: #63b5ef;
			}
			tbody tr{
				height: 30px;
			}
			tbody td{
				border-bottom: 1px solid #2177b5;
				font-size: 12px;
				color: #727679;
			}
			.bg{
				color: black;
				background-color: rgba(223, 189, 214,0.5);
			}
			table caption{
				font-weight: bold;
				font-size: 20px;
			}
		</style>

<script type="text/javascript">
		
		//获取相应的元素
		var j_cbAll = document.getElementById('j_cbAll');//获取thead中th的全选按钮
		var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); //获取<tbody>中td的选择按钮
		//注册点击事件
		
		//全选与不全选的制作
		j_cbAll.onclick = function(){
			//console.log(this.checked);//测试复选框是否已经选中，true选中,false没选中
			for (var i = 0; i < j_tbs.length; i++) {
				j_tbs[i].checked = this.checked; //让j_tbs中的按钮和j_cbAll的按钮属性相等
			}
		}
		//用j_cbAll的按钮去影响j_tbs中的按钮
		//设置一个变量来确定是否全部选中
		for (var i = 0; i < j_tbs.length; i++) {
			j_tbs[i].onclick = function(){
				var flag = true;
				//设置一个属性，用来控制按钮是否选中
				//每次点击后都要检查td中的按钮是否都被点中	
				for (var i = 0; i < j_tbs.length; i++) {
					if(!j_tbs[i].checked){
						// 前面添加 ! 是属于j_tbs中某个按钮没有被选中 
						flag = false;
					}
				}
			j_cbAll.checked = flag;
			}
		}
		
	</script>

实现效果：