用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false，当所有checkbox都被选中时，全选按钮也被选中。

详解：

有两种方式使<input type="checkbox" />中的复选框被选中。

方法一:直接在HTML行间中添加checked属性。   eg：<input type="checkbox" checked />

方法二：使用javascript使input对象的checked="true";  eg: document.getElementsByTagName('input')[0].checked='true';

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>全选</title>

<script>

window.onload = function(){

    var aInput = document.getElementsByTagName('input');

    var oInput = aInput[0];

    var a = 0;

    var b = 0;

    aInput[0].onclick = function(){

        for (var i = 0; i < aInput.length; i++) {

            if(aInput[0].checked == true){

                aInput[i].checked = true;

            }else{

                aInput[i].checked = false;

            }

        }

    };

    for (var i = 1; i < aInput.length; i++) {

        aInput[i].onclick = function(){

            a = 0;

            b = 0;

            for (var i = 1; i < aInput.length; i++) {

                if (aInput[i].checked == false) {

                    a++;

                }else {

                    b++;

                }

            }

            if(a>0){

                oInput.checked = false;

            }else if(b==aInput.length-1){

                oInput.checked = true;

            };

        };

    }

};

</script>

</head>

<body>

<p><input type="checkbox" name="" />全选</p>

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

<input type="checkbox" name="" /><br />

</body>

</html>

js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false的更多相关文章

  1. 关于复选框input[type=checkbox]

    关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...

  2. HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）

    原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...

  3. 用 JS 做一个数独游戏（二）

    用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...

  4. 用JS做一个简单的电商产品放大镜功能

    使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...

  5. 用 JS 做一个数独游戏（一）

    用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...

  6. Android ListView批量选择（全选、反选、全不选）

    APP的开发中,会常遇到这样的需求:批量取消(删除)List中的数据.这就要求ListVIew支持批量选择.全选.单选等等功能,做一个比较强大的ListView批量选择功能是很有必要的,那如何做呢? ...

  7. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  8. AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；

    js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...

  9. jquery easyui datagrid 获取Checked选择行(勾选行)数据

    原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...

随机推荐

  1. 关于IN-LIST迭代

    IN-list iterator (IN-list迭代) 字段有索引,in里有多少个值就执行多少次索引扫描.不管值是否在字段里存在~ SQL> create table t1 as select ...

  2. 译文: async/await SynchronizationContext 上下文问题

    async / await 使异步代码更容易写,因为它隐藏了很多细节. 许多这些细节都捕获在 SynchronizationContext 中,这些可能会改变异步代码的行为完全由于你执行你的代码的环境 ...

  3. SPOJ-COT-Count on a tree(树上路径第K小，可持久化线段树)

    题意: 求树上A,B两点路径上第K小的数 分析: 同样是可持久化线段树,只是这一次我们用它来维护树上的信息. 我们之前已经知道,可持久化线段树实际上是维护的一个前缀和,而前缀和不一定要出现在一个线性表 ...

  4. web.xml 详解contextConfigLocation 转

    spring的应用初始化流程一直没有搞明白,刚刚又碰到了相关的问题.决定得好好看看这个流程.我们在开发spring的项目当中基本上都会在web.xml通过: <context-param> ...

  5. 原生javascript难点总结(1)---面向对象分析以及带来的思考

    ------*本文默认读者已有面向对象语言(OOP)的基础*------ 我们都知道在面向对象语言有三个基本特征 :  封装 ,继承 ,多态.而js初学者一般会觉得js同其他类C语言一样,有类似于Cl ...

  6. 【转】 log4cpp 的使用

    [转自] http://sogo6.iteye.com/blog/1154315     Log4cpp配置文件格式说明   log4cpp有3个主要的组件:categories(类别).append ...

  7. maya绝招（21--40）

    第21招 将Outliner分成两个 在该视图中如果元素很多的时候,会觉得Outliner不够用,这个时候拖动下侧的底框,就可以分成两栏,这样选择就省事多了. 第22招 运用选择区域,快速选择物体 在 ...

  8. Building Apps with Over 65K Methods（解决APP引用方法总数超过65536）

    本文翻译自http://developer.android.com/intl/zh-cn/tools/building/multidex.html#about.主要介绍当我们Android App中函 ...

  9. mac svn命令

    转载:Mac下svn command命令 svn help command  获取子命令说明 svn info $URL 查看工作空间信息 svn list   显示当前目录下svn记录文件列表,不访 ...

  10. Java宝典

    本人最近参加了几家公司的面试,在其中发现了不少笔试题,虽然是平常再简单不过的,但一不小心还是会出错.今天特意找时间写下来和大家分享. 1.访问控制符权限问题.   同一个包中 同一个类中 不同包的子类 ...