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>

    刚开始练习写的不好

  • 相关阅读:
    多重继承的构造函数和析构函数的执行顺序(包含虚基类)
    java解析XML之DOM解析和SAX解析(包含CDATA的问题)
    java解析XML之DOM解析和SAX解析(包含CDATA的问题)
    计算机网络总结之运输层
    Method, apparatus, and system for speculative abort control mechanisms
    [转]如何用adb控制MTKLogger
    反转单向、双向链表
    删除链表中间节点和a/b处的节点
    Android 中log 找到关键log
    在单链表和双链表中删除倒数第k个结点
  • 原文地址:https://www.cnblogs.com/xiuxiu123456/p/8461223.html
Copyright © 2011-2022 走看看