温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

纯js实现checkbox的全选、反选、全不选

发布时间:2020-06-11 21:29:35 来源:网络 阅读:1183 作者:Lee_吉 栏目:web开发
  1. 分开:
    a. 代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <input type="checkbox" id="check_all">全选
    <input type="checkbox" id="un_check_all">全不选
    <input type="checkbox" id="un_check">反选
    <br>
    <input type="checkbox"> 
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <script>
    var check_all = document.getElementById('check_all');
    var un_check_all = document.getElementById('un_check_all');
    var un_check = document.getElementById('un_check');
    var checkbox = document.getElementsByTagName('input');
    var arr = new Array('check_all','un_check_all','un_check')
    function testCheck(){
    var bool = false;
    for (var i=0;i<checkbox.length;i++){
        if(!(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1))){
            if(checkbox[i].checked){
                bool = true;
                break;
            }
        }
    }
    return bool;
    }
    function checkAll(){
    for (var i=0;i<checkbox.length;i++){
        if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
            if(checkbox[i].getAttribute('id')=='check_all'){
                console.log(1)
                checkbox[i].checked = true
            }else{
                checkbox[i].checked = false
            }
        }else{
            checkbox[i].checked = true
        }
    }
    }
    function unCheckAll(){
    for (var i=0;i<checkbox.length;i++){
        if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
            if(checkbox[i].getAttribute('id')=='un_check_all'){
                console.log(2)
                checkbox[i].checked = true
            }else{
                checkbox[i].checked = false
            }
        }else{
            checkbox[i].checked = false
        }
    }
    }
    function unCheck(){
    for (var i=0;i<checkbox.length;i++){
        if(checkbox[i].hasAttribute('id') && (arr.indexOf(checkbox[i].getAttribute('id'))!=-1)){
            if(checkbox[i].getAttribute('id')=='un_check'){
                console.log(3)
                checkbox[i].checked = true
            }else{
                checkbox[i].checked = false
            }
        }else{
            if(checkbox[i].checked == true){
                checkbox[i].checked = false
            }else{
                checkbox[i].checked = true
            }
        }
    }
    }
    check_all.onclick = function(){
                        checkAll()
                    }
    un_check_all.onclick = function(){
                        unCheckAll()
                    }
    un_check.onclick = function(){
                        unCheck()
                    }
    </script>
    </body>
    </html>

    b. 效果:
    纯js实现checkbox的全选、反选、全不选
    纯js实现checkbox的全选、反选、全不选
    纯js实现checkbox的全选、反选、全不选
    纯js实现checkbox的全选、反选、全不选
    纯js实现checkbox的全选、反选、全不选

  2. 合并:
    a. 代码:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <body>
    <input type="checkbox" id="toggle_check">全选/全不选
    <br>
    <input type="checkbox"> 
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <br>
    <input type="checkbox">
    <script>
    var toggle_check = document.getElementById('toggle_check');
    var checkbox = document.getElementsByTagName('input');
    function testCheck(){
    var bool = false;
    for (var i=0;i<checkbox.length;i++){
        if(!(checkbox[i].hasAttribute('id') && checkbox[i].getAttribute('id') == 'toggle_check')){
            if(checkbox[i].checked){
                bool = true;
                break;
            }
        }
    }
    return bool;
    }
    function checkAll(){
    for (var i=0;i<checkbox.length;i++){
        checkbox[i].checked = true
    }
    }
    function unCheckAll(){
    for (var i=0;i<checkbox.length;i++){
        checkbox[i].checked = false
    }
    }
    toggle_check.onclick = function(){
                        var bool = testCheck()
                        if(bool){
                            unCheckAll()
                        }else{
                            checkAll()
                        }
                    }
    </script>
    </body>
    </html>

    b. 效果:
    纯js实现checkbox的全选、反选、全不选
    纯js实现checkbox的全选、反选、全不选
    纯js实现checkbox的全选、反选、全不选

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI