表单全选以及取消全选的制作

简介: 表单全选以及取消全选的制作

屏幕快照 2022-05-07 下午3.30.30.png

    <script>
        // 1. 全选和取消全选做法:  让下面所有复选框的checked属性(选中状态) 跟随 全选按钮即可
        // 获取元素
        var j_cbAll = document.getElementById('j_cbAll'); // 全选按钮
        var j_tbs = document.getElementById('j_tb').getElementsByTagName('input'); // 下面所有的复选框
        // 注册事件
        j_cbAll.onclick = function() {
                // this.checked 它可以得到当前复选框的选中状态如果是true 就是选中,如果是false 就是未选中
                console.log(this.checked);
                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].onclick = function() {
                // flag 控制全选按钮是否选中
                var flag = true;
                // 每次点击下面的复选框都要循环检查者4个小按钮是否全被选中
                for (var i = 0; i < j_tbs.length; i++) {
                    if (!j_tbs[i].checked) {
                        flag = false;
                        break; // 退出for循环 这样可以提高执行效率 因为只要有一个没有选中,剩下的就无需循环判断了
                    }
                }
                j_cbAll.checked = flag;
            }
        }
    </script>
相关文章
|
存储 缓存 JavaScript
不要过度封装!封装一个最简单的Axios!
前言 axios 是目前最优秀的 HTTP 请求库之一,虽然 axios 已经封装的非常好了,我们可以直接拿过来用。但是在实际的项目中,我们可能还需要对 axios 在封装一下,以便我们更好的管理项目和各个借口。 但是,目前网上有特别多的针对于 axios 在项目中的封装。不得不说,很多大佬封装得非常全面,方方面面都考虑到了。但是我们的每个真的都需要那些封装吗?显然不是的,网上的很多封装其实都显得有点过度封装了! 本篇文章实现最简单 Axios 封装,让小伙伴们扩展起来容易一些。
5872 0
不要过度封装!封装一个最简单的Axios!
|
缓存 搜索推荐 JavaScript
|
API 数据库
Abp源码分析之Abp最小系统
本文详细介绍了如何构建一个基于ABP框架的最小系统,包括创建API项目、配置模块、访问数据库等步骤。通过创建API项目、修改`Program.cs`和`BookAbpModule.cs`文件,以及添加模块和数据库访问功能,最终实现了基本的CRUD操作。文章还展示了如何使用Swagger生成API文档,并通过控制台输出验证模块的加载顺序。适合初学者快速上手ABP框架。
188 3
Abp源码分析之Abp最小系统
|
11月前
|
算法 编译器 C语言
【C语言】C++ 和 C 的优缺点是什么?
C 和 C++ 是两种强大的编程语言,各有其优缺点。C 语言以其高效性、底层控制和简洁性广泛应用于系统编程和嵌入式系统。C++ 在 C 语言的基础上引入了面向对象编程、模板编程和丰富的标准库,使其适合开发大型、复杂的软件系统。 在选择使用 C 还是 C++ 时,开发者需要根据项目的需求、语言的特性以及团队的技术栈来做出决策。无论是 C 语言还是 C++,了解其优缺点和适用场景能够帮助开发者在实际开发中做出更明智的选择,从而更好地应对挑战,实现项目目标。
415 0
|
存储 算法 安全
深入解析消息认证码(MAC)算法:HmacMD5与HmacSHA1
深入解析消息认证码(MAC)算法:HmacMD5与HmacSHA1
|
人工智能 自然语言处理 NoSQL
LangChain 构建问题之LangChain 中生成文本的嵌入向量如何解决
LangChain 构建问题之LangChain 中生成文本的嵌入向量如何解决
204 0
|
机器学习/深度学习 JSON Kubernetes
一篇文章讲明白k8s网络插件flannel模式剖析:vxlan、host
一篇文章讲明白k8s网络插件flannel模式剖析:vxlan、host
662 0
在Uniapp应用开发中遇到的问题、错误代码与解决方案汇总
在Uniapp应用开发中遇到的问题、错误代码与解决方案汇总
1048 0
|
机器学习/深度学习 固态存储 算法
【项目实践】从零开始学习SSD目标检测算法训练自己的数据集(附注释项目代码)(一)
【项目实践】从零开始学习SSD目标检测算法训练自己的数据集(附注释项目代码)(一)
1000 0