表单全选取消全选
Posted cy1227
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了表单全选取消全选相关的知识，希望对你有一定的参考价值。
案例分析：
1.全选和取消全选做法：让下面所有复选框的checked属性（选中状态）跟随全选按钮即可；
2.下面复选框需要全部选中，上面的全选才可以选中做法：给下面所有复选框绑定点击事件，每次点击，都要循环查看下面所有的复选框是否有没选中的，如果有一个没选中的，上面全选框就不选中。
效果图：
代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单全选与取消全选</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 table{ 12 margin: 100px auto; 13 text-align: center; 14 border: 1px solid gray; 15 border-spacing: 0; 16 cursor: pointer;; 17 } 18 th,td{ 19 border: 1px solid gray; 20 padding: 10px; 21 } 22 thead{ 23 background-color: powderblue; 24 } 25 .bg{ 26 background-color: rgb(190, 189, 189); 27 } 28 </style> 29 </head> 30 <body> 31 <div id="wrap"> 32 <table> 33 <thead> 34 <tr> 35 <th><input type="checkbox" id="selectAll"></th> 36 <th>商品</th> 37 <th>价格</th> 38 </tr> 39 </thead> 40 <tbody id="select"> 41 <tr> 42 <td><input type="checkbox"></td> 43 <td>iphone 8</td> 44 <td>3999</td> 45 </tr> 46 <tr> 47 <td><input type="checkbox"></td> 48 <td>iphone 8 plus</td> 49 <td>4999</td> 50 </tr> 51 <tr> 52 <td><input type="checkbox"></td> 53 <td>iphone 11</td> 54 <td>5999</td> 55 </tr> 56 <tr> 57 <td><input type="checkbox"></td> 58 <td>iphone 11 pro</td> 59 <td>9999</td> 60 </tr> 61 </tbody> 62 </table> 63 </div> 64 <script> 65 //设计鼠标移入和移出的背景变化 66 var trs=document.getElementById("select").querySelectorAll("tr"); 67 for(var i=0;i<trs.length;i++){ 68 //鼠标移入事件 69 trs[i].onmouseover=function(){ 70 this.className="bg"; 71 } 72 //鼠标移出事件 73 trs[i].onmouseout=function(){ 74 this.className=""; 75 } 76 } 77 //1.全选和取消全选 78 //获取元素 79 var selectAll=document.getElementById("selectAll"); //全选按钮 80 var select=document.getElementById("select").getElementsByTagName("input"); //下面所有的复选框 81 //注册事件 82 selectAll.onclick=function(){ 83 //this.checked可以得到当前复选框的选中状态，如果是true则表示选中，如果是false就表示未选中 84 for(var i=0;i<select.length;i++){ 85 //看全选框是否全选，把它的选中状态赋值给下面所有的复选框 86 select[i].checked=this.checked; 87 } 88 } 89 //2.判断下面的是否全选 90 for(var i=0;i<select.length;i++){ 91 select[i].onclick=function(){ 92 var flag=true; //注意flag要放在点击事件里…… 93 //下面的变量i是在另一个函数里，和外层的i是不同的作用域 94 for(var i=0;i<select.length;i++){ 95 if(!select[i].checked){ 96 flag=false; 97 break; 98 } 99 } 100 selectAll.checked=flag; 101 } 102 } 103 </script> 104 </body> 105 </html>
以上是关于表单全选取消全选的主要内容，如果未能解决你的问题，请参考以下文章
jQuery 表单应用：全选/取消全选，表单验证，网页选项卡切换
受控组件——受控组件简写——受控表单组件-——复选框取消全选等