HTML代码如下:

<div>
    <label><input type="checkbox" name="aAll">全选</label><br>
    <label><input type="checkbox" name="a">A</label><br>
    <label><input type="checkbox" name="a">B</label><br>
    <label><input type="checkbox" name="a">C</label>
</div>

JS代码如下:

     var all = document.getElementsByName("aAll")[0];
     var aCheck = document.getElementsByName("a");
     all.onclick = function(){
         if(this.checked){
             for(var i of aCheck){
                 i.checked = true;
             }
         }else{
             for(var i of aCheck){
                 i.checked = false;
             }
         }
     }
     for(var i of aCheck){
         i.onclick = function(){
             if(!this.checked){
                 all.checked = false;
             }
         }
     }

逻辑很简单,有兴趣的可以复制到页面试试。

js实现复选框全选的更多相关文章

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

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

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

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

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

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

  4. FineReport——JS二次开发(复选框全选)

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

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

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

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

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

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

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

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

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

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

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

  10. jQuery 前端复选框 全选 反选 下拉菜单联动

    jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. Android Studio如何减小APK体积

    最近在用AndroidStudio开发一个小计算器,代码加起来还不到200行.但是遇到一个问题,导出的APK文件大小竟然达到了1034K.这不科学,于是就自己动手精简APK.下面我们大家一起学习怎么缩 ...

  2. supermap布局设定地图网格及布局网格

    地图网格设定 LayoutElements elements = m_mapLayoutControl.MapLayout.Elements; //构造GeoMap GeoMap geoMap = n ...

  3. 连接池的实现 redis例子

    # -*- encoding:utf-8 -*- # import pymysql # # conn = pymysql.connect(host="127.0.0.1", por ...

  4. 如何查看编译安装的lnmp环境各自的配置参数

    安装好后如何查看mysql/apache/nginx/php安装参数   查看mysql编译参数: cat /usr/local/mysql/bin/mysqlbug | grep CONFIGURE ...

  5. FFmpeg-for IOS 一[安装]

    FFmpeg编译环境搭建 准备 下载 gas-preprocessor 下载 ffmpeg包,ffmpeg 安装yasm,先安装homebrew,输入:ruby -e "$(curl -fs ...

  6. asp.net mvc使用log4gNetz

    1. 下载安装log4gNet 2. 将 \bin\net\4.0\release\log4net.dll 复制到你的项目中 . 3. 将log4net.dll 添加引用到你的项目中. 4. 添加如下 ...

  7. apache 配置rewrite模块,URL中隐藏index.php

    打开httpd.conf 去掉下面的井号 #LoadModule rewrite_module modules/mod_rewrite.so把前面的警号去掉 在网站根目录添加.htaccess Rew ...

  8. Delphi XE7中各种字符串与字符类型的内存结构

    1. ShortString 类型 定义:type ShortString = string[255]; 内存结构与大小:ShortString 是每个字符为单字节的字符串.ShortString 的 ...

  9. Windows10下的JDK环境配置。

    首先附上JDK资源: 下载地址:Java SE Development Kit 8u112 PS:32位系统下载X86,64位系统下载X64 JDK安装: 此处省略安装步骤..... PS:记住JDK ...

  10. EXCEL 2010学习笔记 —— 数据透视表

    今天整理一下EXCEL2010 数据透视表的课程笔记,数据透视表可以对多组数据进行统计和整理,是一种基本的数据可视化工具. 记录6个方面的总结: 1.创建数据透视表 2.更改数据透视表的汇总方式 3. ...