zoukankan      html  css  js  c++  java
  • 案例:全选按钮和取消全选

    ① 全选和取消全选做法:让下面所有复选框的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>
  • 相关阅读:
    例5-6
    例5-5
    例5-4
    例4-5
    例4-4
    例4-3
    例4-2
    例3-11
    例3-10
    例3-9
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12934017.html
Copyright © 2011-2022 走看看