zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    大数问题(三)(大数相除)
    直接插入排序的四种实现方法
    蟠桃记
    杭电oj find your present (2)
    CSS中的class与id区别及用法
    史上最全的css hack(ie6-9,firefox,chrome,opera,safari) (zz)
    CSS之CSS hack
    HTML语言的一些元素(五)
    HTML语言的一些元素(四)
    HTML语言的一些元素(三)
  • 原文地址:https://www.cnblogs.com/chefweb/p/5950237.html
Copyright © 2011-2022 走看看