表格的全选与反选

<script>
        // 1.获取元素
        var j_cbAll = document.getElementById('j_cbAll');
        var j_tb = document.getElementById('j_tb').getElementsByTagName('input');
        // 2.绑定事件
        j_cbAll.onclick = function () {
            // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中,如果是false 就是未选中
            console.log(this.checked);
            for (i = 0; i < j_tb.length; i++) {
                j_tb[i].checked = this.checked;
            }
        }
        // 2. 下面复选框需要全部选中, 上面全选才能选中做法: 给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的, 上面全选就不选中。
        for (i = 0; i < j_tb.length; i++) {
            //遍历注册事件
            j_tb[i].onclick = function () {
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (i = 0; i < j_tb.length; i++) {
                    // 点击之后 遍历所有复选框,默认点击后为真,!取反后为假,如果假则flag=假。
                    if (!j_tb[i].checked) {
                        flag = false;
                        break;
                    }
                }
j_cbAll.checked
= flag; } } </script>
posted @ 2020-06-12 15:20  散格  阅读(370)  评论(0编辑  收藏  举报