注 : 本文章主要写功能

代码示例 :

<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. 洛谷 P1020 [NOIP1999 普及组] 导弹拦截

    Coidng #include <iostream> #include <algorithm> #include <cstring> #include <ve ...

  2. Notion-douan：搭建自己的阅读清单

    前言 交完论文盲审稿,终于从接近一年的实习.秋招和论文的忙碌中闲下来. 在复盘秋招的时候发现自己虽然看过不少书,但缺少整理和思考,所以想趁这个机会梳理一下自己的阅读习惯,希望以后再读新的东西可以更系统 ...

  3. github新手使用指南

    常用命令:   Git 速查表(摘自 AI有道) 一.常见命令 git init : 初始化 git 仓库,即将一个文件夹初始化为一个 git 仓库.具体的操作是创建一个 .git 隐藏文件夹 git ...

  4. abstract的method是否可同时是static，是否可同时是native，是否可同时是synchronized?

    abstract的method 不可以是static的,因为抽象的方法是要被子类实现的,而static与子类扯不上关系! native方法表示该方法要用另外一种依赖平台的编程语言实现的,不存在着被子类 ...

  5. BASH和DOS之间的基本区别是什么？

    BASH和DOS控制台之间的主要区别在于3个方面:1. BASH命令区分大小写,而DOS命令则不区分;2. 在BASH下,/ character是目录分隔符,\作为转义字符.在DOS下,/用作命令参数 ...

  6. 什么是bean的自动装配？

    Spring 容器能够自动装配相互合作的bean,这意味着容器不需要<constructor-arg>和<property>配置,能通过Bean工厂自动处理bean之间的协作.

  7. @Autowired 注解 ？

    @Autowired 注解提供了更细粒度的控制,包括在何处以及如何完成自动装配. 它的用法和@Required 一样,修饰 setter 方法.构造器.属性或者具有任意名称 和/或多个参数的 PN 方 ...

  8. 学习Apache（五）

     apache目前主要有两种模式:prefork模式和worker模式: 1)prefork模式(默认模式) prefork是Unix平台上的默认(缺省)MPM,使用多个子进程,每个子进程只有一个线程 ...

  9. 学习Apache（三）

    对某个目录开启验证登录 <Directory /var/www/html/admin > AllowOverride All Order allow,deny Allow from all ...

  10. 图灵机器人 V1 和 V2 接入方法

    API1.0使用方法: import requests import json import yuyinhecheng as hc def Tuling(words):     Tuling_API_ ...