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>

    刚开始练习写的不好

  • 相关阅读:
    web在线智能四则运算挑战赛
    超简单的实现wordcount
    构建之法现代软件工程自我介绍
    通过WMI获取机器信息
    ManagementObjectSearcher Path
    开启FIPS协议
    Windows Server 2012开启多人远程
    开发企业应用系统需要掌握的知识技能
    Win7系统下彻底删除无用服务的方法
    C#基础(二)之数据类型
  • 原文地址:https://www.cnblogs.com/xiuxiu123456/p/8461223.html
Copyright © 2011-2022 走看看