checkbox 的全选与全不选

Posted 大厨的笔记

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了checkbox 的全选与全不选相关的知识，希望对你有一定的参考价值。

checkbox 的全选与全不选

只需要调用 cekAll.check();方法，这个方法接收两个参数：

参数一: 全选按钮的 id 以字符串的形式写
参数二: 其他 checkbox 的 name 值 也是以字符串的形式写

使用很简单 : 复制 js 代码到你的 js 文件的任何地方，只需要在html文档加载完以后调用 cekAll.check();传入参数即可 什么点击事件，什么获取对象，统统不用写，

装点：不管你的 checkbox 是写到页面上的还是动态读取的，都不需要加事件。

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
    var cekAll = {
        ‘num‘:0,
        check:function(part,chid){
            var parent = document.getElementById(part);
            var child = document.getElementsByName(chid);
            parent.onclick = function(){
                if(parent.checked != true){
                    for(var j = 0;j<child.length;j++){
                        child[j].checked = false;
                        cekAll.num = 0;
                    };
                }else{
                    for(var i=0;i< child.length;i++){
                        if(parent.checked == true){
                            child[i].checked = true;
                            cekAll.num = child.length;
                        };
                    };
                };
            };
            cekAll.childClick(part,chid);
        },
        childClick:function(one,two){
            var one1 = document.getElementById(one);
            var two1 = document.getElementsByName(two);
            for(var j = 0;j< two1.length;j++){
                two1[j].onclick = (function(){
                    return function(){
                            if(this.checked == false){
                                one1.checked = false;
                                cekAll.num--;
                            }else{
                                cekAll.num ++;
                                if(cekAll.num == two1.length){
                                    one1.checked = true;
                                };
                            };
                        };
                })();
            };
        }
    };
    </script>
</head>
<body>
    <div>
        <input type="checkbox" id="quanxuan"/>全选<br/>
    </div>
<script>
    // 动态添加的 checkbox 跟写到页面上是一样的
    var div = document.getElementsByTagName(‘div‘)[0];
    var arr = [‘吃饭‘,‘睡觉‘,‘打豆豆‘];
        for(i in arr){
            var str = ‘<input type="checkbox" name="che1">‘+arr[i]+‘‘;
            div.innerHTML += str;
        }
    // -- 静态写到页面上的、动态添加的，调用 cekAll.check(); 方法的书写格式都一样
    cekAll.check(‘quanxuan‘,‘che1‘);
    </script>
</body>
</html>

 

以上是关于checkbox 的全选与全不选的主要内容，如果未能解决你的问题，请参考以下文章

案例：全选与全不选及反选

全选与全不选

jquery控制checkbox全选与全不选

原生JavaScript实现checkbox全选与全不选

关于checkbox全选与全不选遇到的问题

jQuery实现复选框的全选与全不选