js全选与全不选

js全选与全不选

css代码 :

<style>
    * {
      padding: 0;
      margin: 0;
    }
    
    .wrap {
      width: 300px;
      margin: 100px auto 0;
    }
    
    table {
      border-collapse: collapse;
      border-spacing: 0;
      border: 1px solid #c0c0c0;
      width: 300px;
    }
    
    th,td {
      border: 1px solid #d0d0d0;
      color: #404060;
      padding: 10px;
    }
    
    th {
      background-color: #09c;
      font: bold 16px "微软雅黑";
      color: #fff;
    }
    
    td {
      font: 14px "微软雅黑";
    }
    
    tbody tr {
      background-color: #f0f0f0;
    }

    tbody tr:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
</style>

html代码 :

<div class="wrap">
	<table>
		<thead>
			<tr>
			  <th>
				<input type="checkbox" id="j_cbAll"/>
		 	 </th>
		 	 <th>菜名</th>
		  	<th>饭店</th>
			</tr>
		</thead>
		<tbody id="j_tb">
			<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>

注:需要引入 common.js文件才能有效果

js代码 :

<script>
	//获取全选的多选框j_cbAll
	var cdAll = mFun$("j_cbAll");
	//获取单个的多选框j_tb
	var cd = mFun$("j_tb").getElementsByTagName("input");
	//对cdAll注册点击事件
	cdAll.onclick = function(){
		console.log(this.checked);
		//遍历所有的多选框 cd
		for(var i = 0; i < cd.length;i++){
			cd[i].checked = this.checked;
		}
	}
	//获取所有的cd复选框 ,注册点击事件
	for(var j = 0;j<cd.length;j++){
		cd[j].onclick = function(){
			var bool = true;
			for(var k = 0; k < cd.length;k++){
				//都选中
				if(!cd[k].checked){
					bool = false;
					break;
				}
			}
			cdAll.checked = bool;//true
		}
	}
</script>

在浏览器展示 :