zoukankan      html  css  js  c++  java
  • JS-复选框全选与取消全选

    checked:设置或者返回checkbox是否应被选中

     1 <!doctype html>
     2 <html lang="en">
     3  <head>
     4   <meta charset="UTF-8">
     5   <meta name="Generator" content="EditPlus®">
     6   <meta name="Author" content="">
     7   <meta name="Keywords" content="">
     8   <meta name="Description" content="">
     9   <title>复选框全选和取消(checked)</title>
    10  </head>
    11  <body>
    12     <script type="text/javascript">
    13         function checkAll(){
    14             //1.获取所有的“爱好”
    15             var aihaos=document.getElementsByName("aihao");
    16             //2.所有的爱好作为一个数组形式被遍历
    17             //3.选中时,所有爱好都应该被选中
    18             /*for(var i=0;i<aihaos.length;i++){
    19                 aihaos[i].checked=true;
    20             }*/
    21             //4.未选中时全部取消选中
    22             var firstCheck=document.getElementById("quanxuan");
    23             if(firstCheck.checked){
    24                     for(var i=0;i<aihaos.length;i++){
    25                     aihaos[i].checked=true;
    26                 }
    27             }else{
    28                 for(var i=0;i<aihaos.length;i++){
    29                     aihaos[i].checked=false;
    30                 }
    31             }
    32         }
    33         function checkOne(){
    34             //所有爱好都选中则全选选中,否则全选未选中
    35             //1.获取所有爱好
    36             var aihaos=document.getElementsByName("aihao");
    37             var checkCount=0;
    38             //2.查看有多少个爱好 aihaos.length==checkCount
    39             //3.计数有多少个爱好是选中状态
    40             for(var i=0;i<aihaos.length;i++){
    41                 if(aihaos[i].checked) checkCount++
    42             }
    43             //4.如果选中的爱好等于所有的爱好,则设置全选框为选择状态
    44             var firstCheck=document.getElementById("quanxuan");
    45             firstCheck.checked=(aihaos.length==checkCount);
    46 
    47         }
    48 
    49     </script>
    50 
    51     <input type="checkbox" id="quanxuan" value="爱好" onclick="checkAll()"><br><br>
    52     <input type="checkbox" name="aihao" value="抽烟" onclick="checkOne()">抽烟<br>
    53     <input type="checkbox" name="aihao" value="喝酒" onclick="checkOne()">喝酒<br>
    54     <input type="checkbox" name="aihao" value="烫头" onclick="checkOne()">烫头<br>
    55   
    56  </body>
    57 </html>

    刚开始练习写的不好

  • 相关阅读:
    解惑如何保证数组元素的可见性(yet)
    为什么内存锁在有事务切面的情况下会形同虚设 隔离级别与事务
    小事故合集
    第4种打整包插件,urlfactory already set
    三目运算符与字节码阅读
    servlet application/x-www-form-urlencoded 坑
    多实例重复发邮件
    当动态代理遇到ioc (五)使用cglib切面与自定义类加载器构建独有环境aop日志
    mac笔记本如何重制secureCRT的体验期|试用版本
    npm install出现的错误
  • 原文地址:https://www.cnblogs.com/xiuxiu123456/p/8461223.html
Copyright © 2011-2022 走看看