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. 基于Swiper 2.7.6实现的带缩略图功能的轮播图

    非原创,只能适合PC端,如果是移动端,只需要修改界面的大小即可.界面如下: 链接:http://pan.baidu.com/s/1pK9XdUV 密码:jsyk

  2. Bzoj3041 水叮当的舞步

    Time Limit: 10 Sec  Memory Limit: 128 MBSubmit: 132  Solved: 75 Description 水叮当得到了一块五颜六色的格子形地毯作为生日礼物 ...

  3. http请求与响应(content-type)

    http请求信息由浏览器把地址栏URL信息和页面(html.jsp.asp)组装成http请求消息体(如下). <request-line>(请求消息行)<headers>(请 ...

  4. Nginx 颁发自签证书

    首先,确保安装了OpenSSL库,并且安装Nginx时使用了–with-http_ssl_module参数. 1:进入生成证书的目录 cd /usr/local/nginx/conf 2:使用open ...

  5. 轮播插件unsilder 源码解析(二)

    $.fn._active = function(className) { //当前的添加class,相邻元素去除class return this.addClass(className).siblin ...

  6. shell条件判断与流程控制

    一 条件判断式语句 1.按文件类型进行判断 测试类型 作用 -b 文件 判断文件是否存在,并且是否为块设备文件(是块设备文件为真) -c 文件 判断文件是否存在,并且是否为字符设备文件(是字符设备设备 ...

  7. orpsocv2 从ROM(bootrom)启动分析--以atlys板子的启动为例子

    1 复位后的启动地址 1) 复位后,启动地址在or1200_defines.v最后宏定义,atlys板子的目录:orpsocv2\boards\xilinx\atlys\rtl\verilog\inc ...

  8. 在Android中Intent的概念及应用(一)——显示Intent和隐式Intent

    Intent寻找目标组件的两种方式: 显式Intent:通过指定Intent组件名称来实现的,它一般用在知道目标组件名称的前提下,一般是在相同的应用程序内部实现的. 隐式Intent:通过Intent ...

  9. 负载均衡-基础-一致性哈希算法及java实现

    一致性hash算法,参考: http://www.blogjava.net/hello-yun/archive/2012/10/10/389289.html 针对这篇文章,加入了自己的理解,在原有的代 ...

  10. react+redux官方实例TODO从最简单的入门(6)-- 完结

    通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...