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

    昨天写了个 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/>
        <a href="javascript:;" id="btn2">反选</a>
    </body>
    </html>
    <script type="text/javascript">
    window.onload = function(){
        var oBtn = document.getElementById('btn');
        var oBtn2 = document.getElementById('btn2');
        var oInput = document.getElementsByName('choose');
        
        for(var i = 0;i < oInput.length; i++){
            oInput[i].onclick = function(){
                this.checked ? allCheck() : oBtn.checked = false;
            };
        };
        
        //全选
        oBtn.onclick = function(){
            for(var i = 0;i < oInput.length; i++){
                oBtn.checked ? oInput[i].checked = true : oInput[i].checked = false;
            };
        };
        
        //反选
        oBtn2.onclick = function(){
            for(var i = 0;i < oInput.length; i++){
                oInput[i].checked = !oInput[i].checked;
            };
            allCheck();
        };
    };
    
    //判断是否全选
    function allCheck(){
        var oBtn = document.getElementById('btn');
        var oInput = document.getElementsByName('choose');
        var allCheck = true;
        for(var i = 0;i < oInput.length; i++){
            if(!(oInput[i].checked)) allCheck = false;
        };
        allCheck ? oBtn.checked = true : oBtn.checked = false;
    };
    </script>
  • 相关阅读:
    HDU 2116 Has the sum exceeded
    HDU 1233 还是畅通工程
    HDU 1234 开门人和关门人
    HDU 1283 最简单的计算机
    HDU 2552 三足鼎立
    HDU 1202 The calculation of GPA
    HDU 1248 寒冰王座
    HDU 1863 畅通工程
    HDU 1879 继续畅通工程
    颜色对话框CColorDialog,字体对话框CFontDialog使用实例
  • 原文地址:https://www.cnblogs.com/yjzhu/p/2792261.html
Copyright © 2011-2022 走看看