• js(四) 全选/全不选和反选


    思路:通过选择全选的选框的状态stuts 即true/false控制其他选框。

    首先 我们要通过.checked方法获取选框(全选/全不选)的值。

    function all(){
       var stuts=document.getElementById("xuan").checked;
       console.log(stuts);          
    }

    此时控制台会打印选中(true)和不选中(false)的值。

    通过getElementsName获取名字相同的checke选框成一个集合,在通过遍历集合更改每个选框的状态值。

    c[i].checked=stuts;

    反选就是让状态值相反即可

     c[i].checked=!c[i].checked;

    源码:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 <head>
     4     <meta charset="UTF-8">
     5     <title>Title</title>
     6 </head>
     7 <body>
     8 <input type="checkbox" name="c">1<br>
     9 <input type="checkbox" name="c">2<br>
    10 <input type="checkbox" name="c">3<br>
    11 <input type="checkbox" name="c">4<br>
    12 <input type="checkbox" name="c">5<br>
    13 <input type="checkbox" name="c">6<br>
    14 <input type="checkbox" name="c">7<br>
    15 <hr>
    16 
    17 <input type="checkbox" id="xuan" onchange="a()">全选/全不选<br>
    18 <input type="button" id="fan" onclick="fan()" value="反选">
    19 
    20 <script>
    21   function a() {
    22     var stuts=document.getElementById("xuan").checked;
    23     var c=document.getElementsByName("c");
    24     for(var i=0;i<c.length;i++){
    25         c[i].checked=stuts;
    26     }
    27   }
    28   function fan() {
    29     var stuts=document.getElementById("fan");
    30     var c=document.getElementsByName("c");
    31     for(var i=0;i<c.length;i++){
    32       c[i].checked=!c[i].checked;
    33     }
    34   }
    35 </script>
    36 </body>
    37 </html>
  • 相关阅读:
    十分钟抢票千余张,黄牛的抢票软件是何原理
    常见乱码解决
    如何给程序中的变量起个好名字
    jsp自定义标签
    request.getHeader("Referer")理解【转载】
    mybatis学习笔记1--HelloMybatis
    Spring学习笔记14---bean的使用
    Spring学习笔记13--Autowire(自动装配)
    Spring 学习笔记12--AOP讲解
    Spring学习笔记11--Spring 自动装配 Bean
  • 原文地址:https://www.cnblogs.com/LiuOOP/p/11102163.html
Copyright © 2020-2023  润新知