注 : 本文章主要写功能

代码示例 :

<body>

        <input type="checkbox" id="che" /><br>

        <input type="checkbox" id="" />

        <input type="checkbox" id="" />

        <input type="checkbox" id="" />

        <input type="checkbox" id="" />

        <script type="text/javascript">

            let che = document.getElementById('che');

            let ches = document.querySelectorAll('input');

            che.onclick = function () {

                for (let i = 1; i < ches.length; i++) {

                    ches[i].checked = this.checked;

                }

            }

            for (let i = 1; i < ches.length; i++) {

                ches[i].onclick = function () {

                    let flag = true;

                    for (let i = 1; i < ches.length; i++) {

                        if (!ches[i].checked) {

                            flag = false

                        }

                    }

                    che.checked = flag

                }

            }

        </script>

    </body>

复制代码直接可用

原生js 复选框全选案例的更多相关文章

  1. html+css+js实现复选框全选与反选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  2. js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中

    <!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...

  3. js 判断 复选框全选、全不选、反选、必选一个

    一个挺 使用的 js 代码片段,  判断  复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...

  4. FineReport——JS二次开发（复选框全选）

    在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...

  5. jQuery中的几个案例：隔行变色、复选框全选和全不选

    1 表格隔行变色 1 技术分析: 1 )基本过滤选择器: odd: even: 2 )jq添加和移除样式: addClass(); removeClass(); 2 代码实现 <script s ...

  6. js实现复选框全选/全不选/反选

    js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  7. checkbox复选框全选批量删除

    多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...

  8. js进阶 9-16 如何实现多选框全选和取消

    js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...

  9. jQuery 复选框全选/取消全选/反选

    jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...

  10. jQuery实现复选框 全选、反选、全不选

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...

随机推荐

  1. 如何使用docker制作开发集成环境

    1. 编写最基本的Dockerfile 内容:touch 一个Dockerfile FROM ubuntu 2. 创建基本的docker镜像 docker build  -t ubuntu:v1 . ...

  2. Bigdecimal 比较问题

  3. 为什么 String 在 Java 中是不可变的？

    我最喜欢的 Java 面试问题,很棘手,但同时也非常有用.一些面试者也常问这个问题,为什么 String 在 Java 中是 final 的.字符串在 Java 中是不可变的,因为 String 对象 ...

  4. 为什么要使用 kafka，为什么要使用消息队列？

    缓冲和削峰:上游数据时有突发流量,下游可能扛不住,或者下游没有足够多的机器来保证冗余,kafka在中间可以起到一个缓冲的作用,把消息暂存在kafka中,下游服务就可以按照自己的节奏进行慢慢处理. 解耦 ...

  5. JDBC几个接口分区叫什么？它们分别有什么用？

    DirverManager类:是JDBC的管理层,作用于用户和驱动之间.该类负责注册和加载JDBC驱动.Connection接口:代表与数据库的链接,并拥有创建SQL语句的方法,以完成基本的SQL操作 ...

  6. Postgres数据库知识点

    1.批量插入: test_list = []for i in range(100): test_list.append(models.Testmodel(name=i, message="{ ...

  7. Spring框架中的单例bean是线程安全的吗?

    不,Spring框架中的单例bean不是线程安全的.

  8. java-与文件相关

    java.nio.file 表示non-blocking 非阻塞io(输入和输出) 一个 Path 对象表示一个文件或者目录的路径,是一个跨操作系统(OS)和文件系统的抽象 java.nio.file ...

  9. WebSQL是HTML 5规范的一部分吗？

    不是,虽然很多人将其标记为HTML 5,但它不是HTML 5规范的一部分.HTML 5规范基于SQLite.

  10. SaltStack项目实战（一）

      系统架构图 一.初始化 1.salt环境配置,定义基础环境.生产环境(base.prod) ? 1 2 3 4 5 6 7 8 9 10 vim /etc/salt/master 修改file_r ...