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. 彻底理解session

    最详细的对session的解析: https://www.tooto.cc/archives/178

  2. decimal与double,float的选择与区别

    decimal 类型可以精确地表示非常大或非常精确的小数.大至 1028(正或负)以及有效位数多达 28 位的数字可以作为 decimal类型存储而不失其精确性.该类型对于必须避免舍入错误的应用程序( ...

  3. 使用django开发博客过程记录1——数据库设计

    1.数据库设计 2.插入测试数据 3.配置相关问题 1.数据库设计 数据库有简单的三张表:Article.Category.Tag以下是代码 # -*- coding:utf-8 -*- from _ ...

  4. 大神php摘录

    1. $rs = M('order')->where('id='.$res['id'])->save($order); )){ M('member')->where('id='.$m ...

  5. LODProp3D实例

    1. Level of detail(LoD)多细节层次描述(简称LoD)是实时绘制复杂几何场景的一种有效工具.基于层次结构的动态简化方法能够根据视点的变化,实时连续地转换场景细节模型.在本例中,实现 ...

  6. MySql简易配置

    选择standard configuration ,然后next Service Name :服务名字 Launch the MySQL Server automatically:是否开机启动mysq ...

  7. 2016-WAS

    http://cuisuqiang.iteye.com/blog/1936402 http://gukeming888.iteye.com/blog/1706475 dd:2016-3-28 inst ...

  8. JS中用apply、bind实现为函数或者类传入动态个数的参数

    为纪念10年没写blog,第一篇博文就以这样一个有趣的窍门开始吧 -___- 在ES5中,当我们调用一个函数时,如果要传入的参数是根据其他函数或条件判断生成的,也就是说不确定会传入多少个参数时,在不改 ...

  9. SqlDataReader和SqlDataAdapter

    SqlDataReader 高效,功能弱,只读访问SqlDataAdapter 强大,要求资源也大一点 SqlDataReader 只能在保持跟数据库连接的状态下才可以读取... SqlDataAda ...

  10. ElasticSearch+ElasticGeo+Geoserver发布ES地理数据

    依赖GeoserverElasticSearchElasticGeo部署部署ElasticGeo使用创建ES数据源并发布发布 依赖 Geoserver 环境搭建参考: ElasticSearch 环境 ...