案例:全选按钮和取消全选

① 全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可

② 下面复选框需要全部选中,上面全选才能选中做法:给下面所有复选框绑定点击事件,每次点击,都要循环查看下面所有的复选框是否有没选中的,如果有一个没选中的,上面全选按钮就不选中。

<script>
    // 1. 全选和取消全选做法:让下面所有复选框的checked属性(选中状态)跟随全选按钮即可
    // 获取元素
    var j_cbAll = document.getElementById('j_cbAll');  // 全选按钮
    var j_tbs = document.getElementById('j_tb').getElementByTagName('input');  // 下面所有的复选框
    // 注册事件
    j_cbAll.onclick = function() {
        // this.checked 它可以得到当前复选框的选中状态,如果是true就是选中,如果是false就是未选中
        for (var i = 0; i < j_tbs.length; i++) {
            j_tbs[i].checked = this.checked;
        }
    }

    // 2. 下面复选框需要全部选中,上面全选按钮才能选中。给下面所有复选框绑定点击事件
    for (var i = 0; i < j_tbs.length; i++) {
        j_tbs[i].checked = function() {
            // flag控制全选按钮是否选中
            var flag = true;
            // 每次点击下面的复选框都要循环检查这4个小按钮是否全被选中
            for (var j = 0; j < j_tbs.length; j++) {
                // 如果有一个复选框没选中,则flag为false
                if (!j_tbs[j].checked) {
                    flag = false;
                    break;
                }
            }
            j_cbAll.checked = flag;
        }
    }
</script>

 

posted @ 2020-05-21 22:30  浮华夕颜  Views(929)  Comments(0Edit  收藏  举报