js实现全选或全不选,类似email的效果

来源:互联网 发布:淘宝三了个七什么意思 编辑:程序博客网 时间:2024/04/28 07:00
<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <div><input type="checkbox" id="checkAll"/>全选/全不选</div>        <ul>            <li><input type="checkbox" class="cb" /> 1......</li>            <li><input type="checkbox" class="cb" /> 2......</li>            <li><input type="checkbox" class="cb" /> 3......</li>            <li><input type="checkbox" class="cb" /> 4......</li>            <li><input type="checkbox" class="cb" /> 5......</li>        </ul>    </body>    <script>        // 依据标签的class属性获取标签对象,这个能精确定位        var inputs = document.getElementsByClassName('cb');        var checkAll=document.getElementById('checkAll');        /*         * 匿名函数只针对checkAll的点击事件         */        // 全选、全不选       checkAll.onclick = function(){            for (var i=0;i<inputs.length;i++){                inputs[i].checked = this.checked;                // 1. 自己是否被选上                // this,指的是当前的标签,在这里指的是<input type="checkbox" id="checkAll"/>                // 2. 如果被选上把其它的也勾选上                // 3. 否则其它的也不勾选            }        };        for(var i=0;i<inputs.length;i++){            inputs[i].onclick=function(){                if(!this.checked){                    // 当 inputs有一个不选时,checkAll不选                    checkAll.checked=false;                }                   // 当inputs全选时,checkAll选中                checkAll.checked = true;                for (var j=0;j<inputs.length;j++){                    if (inputs[j].checked == false){                        checkAll.checked = false;                        break;                    }                }            }            }       </script></html>

当inputs全选时,checkAll选中也可以写成这样:

              var status = truefor (var j=0;j<inputs.length;j++){                    if (inputs[j].checked == false){                       status = false;                        break;                    }                }                checkAll.checked = status;
0 0
原创粉丝点击