zoukankan      html  css  js  c++  java
  • 表单全选取消全选

    案例分析:

    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>
  • 相关阅读:
    Redis学习手册(String数据类型)
    Redis学习手册(开篇)
    android判断当前应用程序处于前台还是后台
    android EditText输入变化事件详解
    Android. Scrolling 2 listviews together
    Android ListView快速定位(四)
    使用【百度云推送】第三方SDK实现推送功能具体解释
    SDN:软件定义网络
    MATLAB中导入数据:importdata函数
    JSP中Session的使用
  • 原文地址:https://www.cnblogs.com/cy1227/p/12297946.html
Copyright © 2011-2022 走看看