全选和全不选代码

HTML代码

   <div class="quanxun">
			   <table>
				   <thead>
					   <tr>
						   <th><input type="checkbox" id="tou"></th>
						   <th>姓名</th>
						   <th>电话号码</th>
						   <th>职业</th>
						   <th>年龄</th>
					   </tr>  
				   </thead>
				   <tbody id="col">
				        <tr>
						   <td><input type="checkbox"></td>
						   <td>张三</td>
						   <td>13243333</td>
						   <td>学生</td>
						   <td>18岁</td>
					    </tr>
						<tr>
						   <td><input type="checkbox"></td>
						   <td>张三</td>
						   <td>13243333</td>
						   <td>学生</td>
						   <td>18岁</td>
						</tr>
						<tr>
						   <td><input type="checkbox"></td>
						   <td>张三</td>
						   <td>13243333</td>
						   <td>学生</td>
						   <td>18岁</td>
						</tr>
						<tr>
						   <td><input type="checkbox"></td>
						   <td>张三</td>
						   <td>13243333</td>
						   <td>学生</td>
						   <td>18岁</td>
						</tr>
					</tbody>
			   </table>
		   </div>

CSS代码

             .quanxun{
				  width: 800px;
				  margin: 0px auto;
			  }
			  .quanxun table{
				  width: 600px;
				  border: 1px solid grey;
				  border-collapse: collapse;
			  }
			  .quanxun table tr{
				  width: 600px;
				  border: 1px solid gray;
			  }
			   .quanxun table tr th{
				   width: 120px;
				   border: 1px solid gray;
			   }
			   .quanxun table tr td{
				   width: 120px;
				   border: 1px solid gray;
				   text-align: center;
			   }

JS代码

function quan(){
				  //获取id名为tou的元素
			 let tou=document.querySelector('#tou');
			 //获取表格主体里面所有input
			 let col=document.querySelectorAll('#col input');
			 // 给头部选框绑定点击事件
			 tou.onclick=function(){
				 // console.log(this.checked);
				 //循环所有主体表格里面input的选框 
				for(let i=0;i<col.length;i++){
					//遍历的选框是当前点击的选框 this是当前的点击的
					col[i].checked=this.checked;
				} 
			 }
			     //在遍历tbody主体表格input
			    for(let i=0;i<col.length;i++){
				 //给tbody主体表格input绑定点击事件
				 col[i].onclick=function(){
					 //设定一个值等于true
					 let xuan=true;
					 //循环每个按钮
					 for(let j=0;j<col.length;j++){
						 //判断按钮没被全选中
						 if(!col[j].checked){
							 //遍历tbody表格主体里面input没被全选则是false；
							 xuan=false;
						 }
					 }
					  //头部选中主体表格里面的input也全部被选中
					 tou.checked=xuan;
				 }
				  
			 }
			 }
			quan()//调用函数

效果图