表单全选取消全选

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 表单应用:全选/取消全选,表单验证,网页选项卡切换

如何在嵌套表单数组中选择all并取消全选?

受控组件——受控组件简写——受控表单组件-——复选框取消全选等

js 全选选框与取消全选代码

jquery实现全选 我全选后,取消全选,再点击全选,却选不上。我手动选上,然后点击取消全选,能够取消。

php处理表单中的复选框问题以及js实现全选