注 : 本文章主要写功能

代码示例 :

<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. LinuxCNC中RS-274/NGC解析器的编译和使用

    原文 http://blog.sina.com.cn/s/blog_a2a6dd380102vrai.html LinuxCNC是一个著名的开源数控软件,目前最新发行版本是:LinuxCNC 2.6. ...

  2. 怎么让一个div消失在视野里

    怎么让一个div消失在视野里 视野内隐藏 1.设置高度宽度为0 div { height: 0; width: 0; } 2.设置透明度为0 div { opacity: 0; } 3.设置displ ...

  3. redis主从复制和哨兵机制

    redis主从复制和哨兵机制 技术标签: redis 1.redis主从复制(master/slave模式) 主数据库可以进行读写操作,当写操作导致数据发生变化时会自动将数据同步给从数据库.而一般情况 ...

  4. jQuery--筛选【过滤函数】

    之前选择器可以完成的功能,筛选也提供了相同的函数 筛选函数介绍 eq(index|-index) 类似:eq()index:正数,从头开始获得指定所有的元素,从0算起,0表示第一个-index:负数, ...

  5. PowerDesigner生成MySQL脚本,表和字段进行转义

    打开Power Designer数据库建模工具,软件基本信息如下 如果PowerDesigner内置的(table_option)表物理操作没有,请看以下步骤 打开 Edit Current DBMS ...

  6. 学习Redis（一）

    一.NoSQL 1.NoSql介绍 1.not only SQL,非关系型数据库,它能解决常规数据库的并发.IO与性能的瓶颈 2.解决以下问题: ① 对数据库的高并发读写需求 ② 大数据的高效存储和访 ...

  7. c源文件中为什么要包含自己对应的头文件

    另一篇:.c文件和.h文件的关系 引言: 我们经常在c工程中发现,源文件中要包含自己的头文件.一直以来,都不知道为什么这样做.现在,我知道了. 以前的认知: 我认为,.c文件没有必要包含自己的.h文件 ...

  8. 顺利通过EMC实验（18）

  9. js如何获取iframe页面内的对象

    简单介绍iframe标签,所有的浏览器都支持<iframe>标签,iframe 元素会创建包含另外一个文档的内联框架(即行内框架).通常我们常用的iframe标签的属性有:width(if ...

  10. 用 JWT 实现小程序本地用户标识

    panda-chat-room 继上节「理解小程序 session」 ,本节我们以 jsonwebtoken 来实现小程序端的用户状态标识.如果你对小程序用户登录流程及 session 管理还有些疑惑 ...