注 : 本文章主要写功能

代码示例 :

<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. linux的文件与目录的权限设置

    @font-face { font-family: 宋体 } @font-face { font-family: "Cambria Math" } @font-face { fon ...

  2. PCIe Tandem PROM 方法

    PCIe Tandem PROM 方法 什么是Tandem PROM? 简单总结:市面多数的FPGA都是SRAM型,需要在上电时从外部存储器件完成代码的加载,对于具有PCIe功能的SRAM FPGA而 ...

  3. macOS逆向-如何分析macOS软件

    目录 macOS逆向-如何分析macOS软件 0x00 前言: 0x01 分析环境搭建: 安装Clang 安装Radare2 关于HT Editor 什么是Radare2 Radare2的手动安装 测 ...

  4. String -- char[]互转

    1.String --> char[] String str = "abc"; char[] chs = str.toCharArray(); 2.char[] --> ...

  5. kafka端口和zookeeper端口

    一.问题描述 今天配合现场联调一个数据工具,工具使用到了kafka,程序启动之后包如下错误: [WARN ] [2020-08-17 19:17:27] [org.apache.kafka.clien ...

  6. Maven的Scored介绍

    Maven的Scored值的介绍:http://maven.apache.org/guides/introduction/introduction-to-dependency-mechanism.ht ...

  7. 区分 BeanFactory 和 ApplicationContext？

    BeanFactory ApplicationContext 它使用懒加载 它使用即时加载 它使用语法显式提供资源对象 它自己创建和管理资源对象 不支持国际化 支持国际化 不支持基于依赖的注解 支持基 ...

  8. 1.时任务XXL_Job框架踩过的坑

    遇到的问题 问题1:执行器地址为空 原因-->执行器中 没有地址 解决方案-->输入地址:http://IP地址:端口 IP地址 端口 问题2:异常信息unknown code for r ...

  9. 攻防世界 web_php_include

    Web_php_include 进入题目源码直接出来了 <?php show_source(__FILE__); echo $_GET['hello']; $page=$_GET['page'] ...

  10. 线性二次型控制器（LQR）——轨迹跟踪器

    1 概念 2 线性时变系统的跟踪问题 3 线性定常系统的跟踪问题 公式18--22为求解的关键     根据20.21分别求出P.g的值则通过18可求得期望的输出u 4 实例分析 5 仿真实验 先将上 ...