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>
  • 相关阅读:
    《JavaWeb从入门到改行》JSP+EL+JSTL大杂烩汤
    Linux下进程线程,Nignx与php-fpm的进程线程方式
    solr全文检索实现原理
    LSM树以及在hbase中的应用
    MySQL的MyISAM与InnoDB的索引方式
    MySQL的innoDB存储引擎的运作方式,数据结构等
    Redis作缓存
    Redis的几点积累
    Redis数据库各种数据结构的内部实现。
    正则表达式!!!
  • 原文地址:https://www.cnblogs.com/zcy9838/p/12934017.html
Copyright © 2011-2022 走看看