表单全选取消全选

案例分析：

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>

posted on 2020-02-12 15:40 SailorM 阅读(897) 评论(0) 编辑收藏举报