js做全选，用一个checkbox复选框做多个checkbox复选框的全选按钮，有一个复选框未被选择时，全选按钮的checked就为false
用一个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的更多相关文章
- 关于复选框input[type=checkbox]
关于复选框input[type=checkbox],其实在前面的文章中说过一次,当时主要关注点在设置复选框的状态,利用prop实现,今天继续关注一下复选框. 自己在项目中,遇到一个全选/全不选的需求, ...
- HTML 5 +CSS3 + 原生js 做（雪花全屏飘落 + 3d旋转图）
原文:HTML 5 +CSS3 + 原生js 做(雪花全屏飘落 + 3d旋转图) 3d旋转图:主要用css3中transform属性中的rotate,translate;以及用来做舞台效果的 pers ...
- 用 JS 做一个数独游戏（二）
用 JS 做一个数独游戏(二) 在 上一篇博客 中,我们通过 Node 运行了我们的 JavaScript 代码,在控制台中打印出来生成好的数独终盘.为了让我们的数独游戏能有良好的体验,这篇博客将会为 ...
- 用JS做一个简单的电商产品放大镜功能
使用js制作一个简单的产品放大图 购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. ...
- 用 JS 做一个数独游戏（一）
用 JS 做一个数独游戏(一) 数独的棋盘由 9x9 的方格组成,每一行的数字包含 1 ~ 9 九个数字,并且每一列包含 1 ~ 9 这 9 个不重复的数字,另外,整个棋盘分为 9 个 3x3 的块, ...
- Android ListView批量选择（全选、反选、全不选）
APP的开发中,会常遇到这样的需求:批量取消(删除)List中的数据.这就要求ListVIew支持批量选择.全选.单选等等功能,做一个比较强大的ListView批量选择功能是很有必要的,那如何做呢? ...
- h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片
得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...
- AJAX部分---对比js做日期的下拉选择 和 ajax做三级联动；
js做日期选择: 实现当前年份的前5后5年的日期选择 实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变 扩展功能:天数可以根据闰年平年变化 <body> & ...
- jquery easyui datagrid 获取Checked选择行(勾选行)数据
原文:jquery easyui datagrid 获取Checked选择行(勾选行)数据 getSelected:取得第一个选中行数据,如果没有选中行,则返回 null,否则返回记录. getSel ...
随机推荐
- 关于将客户端移植到Lua的解决方案设想。
现在发行商都需要cp们做热更新,而对于unity制作的游戏来讲,这个恐怕是个噩梦,而项目已经进行到中后期,确实很麻烦,有UniLua,但是如果全部手动解决恐怕上不了线了工作量太大,初步设想如果做一个基 ...
- php将SQL查询结果赋值给变量
2012-03-25 12:12 a786013819 | 分类:数据库DB | 浏览1393次 $sql = "select field1 from pre_common_member_p ...
- 《A First Course in Probability》-chaper8-极限定理-弱大数定理
基于之前强大数定理的得证,这里我们再结合切比雪夫不等式,能够得到弱大数定理. 弱大数定理: 表面上,强大数定理和弱大数定理好像是质同的,但是他们之间真正的区别到底是什么呢?
- poj 1106 Transmitters (枚举+叉积运用)
题目链接:http://poj.org/problem?id=1106 算法思路:由于圆心和半径都确定,又是180度,这里枚举过一点的直径,求出这个直径的一个在圆上的端点,就可以用叉积的大于,等于,小 ...
- [置顶] IOS 基础入门教程
IOS 基础入门教程 教程列表: IOS 简介 IOS环境搭建 Objective C 基础知识 创建第一款iPhone应用程序 IOS操作(action)和输出口(Outlet) iOS - 委托( ...
- 窗体控件 回车事件 分类： WinForm 2014-11-21 10:45 233人阅读 评论(0) 收藏
说明: (1)设置窗体控件的TabIndex属性,(按回车顺序设置TabIndex的大小) (2)修改窗体的一个属性:KeyPreview=true //protected override void ...
- C# ArrayList 基本用法 分类： C# 2014-09-26 11:03 524人阅读 评论(0) 收藏
首先说明一下ArrayList 与 数组的区别: (1)ArrayList 的容量可以根据需要自由扩充,数组的容量是固定的 (2)ArrayList 只能是一维形式,数组可以是多维的 (3)Array ...
- Ubuntu 命令行下快速打开各类文件 分类： ubuntu shell 2014-11-18 20:06 210人阅读 评论(0) 收藏
xdg-open 命令可以用来在Ubuntu下快速打开各类文件. 下面是从 manual 文档里截取的内容: 可以知道,该命令的功能是在图形界面下按照用户的平时习惯打开各类文件,甚至是链接. 这样,我 ...
- 常见的浏览器Hack技巧总结(转)
如果你经常需要做前端页面,那么你一定多多少少需要解决页面的浏览器兼容问题.而浏览器兼容问题大部分也集中在对IE系列的兼容.这里就总结一下对IE系列的CSS Hack,记录一下,方便以后查阅. IE H ...
- Some code changes cannot be hot swapped into a running virtual machine,
翻译一下:不能热交换到运行虚拟机,一些代码变化不能热交换到运行虚拟机,如更改名称或介绍的方法错误运行代码.解决方法:增加.删除类文件或者在一个类中增加.删除方法时,是不能够热部署到服务上的.这时候需要 ...