zoukankan      html  css  js  c++  java
  • 【javascript】checkbox——类似邮箱全选功能

    现在很多邮箱都有全选的功能,我也做了个练练手。

    <!DOCTYPE HTML>
    <html lang="en-US">
    <head>
        <meta charset="UTF-8">
        <title>checkbox</title>
    </head>
    <body>
        <input type="checkbox" name="btn" id="btn"/><label for="btn">全选</label><br/>
        <input type="checkbox" name="choose" id="checkbox1"/><label for="checkbox1">选项1</label><br/>
        <input type="checkbox" name="choose" id="checkbox2"/><label for="checkbox2">选项2</label><br/>
        <input type="checkbox" name="choose" id="checkbox3"/><label for="checkbox3">选项3</label><br/>
        <input type="checkbox" name="choose" id="checkbox4"/><label for="checkbox4">选项4</label><br/>
        <input type="checkbox" name="choose" id="checkbox5"/><label for="checkbox5">选项5</label><br/>
        <input type="checkbox" name="choose" id="checkbox6"/><label for="checkbox6">选项6</label><br/>
        <input type="checkbox" name="choose" id="checkbox7"/><label for="checkbox7">选项7</label><br/>
        <input type="checkbox" name="choose" id="checkbox8"/><label for="checkbox8">选项8</label><br/>
        <input type="checkbox" name="choose" id="checkbox9"/><label for="checkbox9">选项9</label><br/>
        <input type="checkbox" name="choose" id="checkbox10"/><label for="checkbox10">选项10</label><br/>
    </body>
    </html>
    <script type="text/javascript">
    window.onload = function(){
        var oBtn = document.getElementById('btn');
        var oInput = document.getElementsByName('choose');
        
        for(var i = 0;i < oInput.length; i++){
            oInput[i].onclick = function(){
                if(this.checked){
                    var allCheck = true;
                    for(var j = 0;j < oInput.length; j++){
                        if(!(oInput[j].checked)){
                            allCheck = false;
                        }
                    };
                    if(allCheck){
                        oBtn.checked = true;
                    }else{
                        oBtn.checked = false;
                    }
                }else{
                    oBtn.checked = false;
                }
            }
        };
        
        //全选
        oBtn.onclick = function(){
            if(oBtn.checked){
                for(var i = 0;i < oInput.length; i++){
                    oInput[i].checked = true;
                }
            } else {
                for(var i = 0;i < oInput.length; i++){
                    oInput[i].checked = false;
                }
            }
        };
    }
    </script>

    只做了全选的功能,反选的功能还没有做,以后补上。由于水平有限,感觉以上代码还可以简化,求指点。

  • 相关阅读:
    存储过程加密
    sql 指删除表,改表名,改字段名
    windows 2003 server 64 位 IIS 6下部署 32位网站
    linux查看内存的使用占比
    linux查看端口是否被占用
    ERROR 2002 (HY000): Can't connect to local MySQL server through socket ‘/var/lib/mysql/mysql.sock' (2)
    mysql数据库的备份(mysqldump)和恢复(source)
    linux解压压缩文件zip/tar/tar.gz命令汇总
    oracle数据库的备份和导入数据
    oracle 备份表数据
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2790463.html
Copyright © 2011-2022 走看看