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 ...
随机推荐
- 14.8.4 Moving or Copying InnoDB Tables to Another Machine 移动或者拷贝 InnoDB 表到另外机器
14.8.4 Moving or Copying InnoDB Tables to Another Machine 移动或者拷贝 InnoDB 表到另外机器 这个章节描述技术关于移动或者复制一些或者所 ...
- 【HDOJ】2888 Check Corners
二维RMQ. /* 2888 */ #include <iostream> #include <algorithm> #include <cstdio> #incl ...
- 【HDOJ】1908 Double Queue
双端队列+二分. #include <cstdio> #define MAXN 1000005 typedef struct { int id; int p; } node_st; nod ...
- [IoLanguage]Io Programming Guide[转]
Io Programming Guide Introduction Perspective Getting Started Downloading Installing Binaries Ru ...
- BZOJ4195 [Noi2015]程序自动分析（离散化+并查集）
4195: [Noi2015]程序自动分析 Time Limit: 10 Sec Memory Limit: 512 MB Submit: 689 Solved: 296 [Submit][Sta ...
- 关于OC头文件互相引用的问题
在OC中头文件互相引用是很常见的一件事,如: A的头文件#import "B.h" 而B的头文件#import "A.h" 这个时候就会出现意想不到的问题.系统 ...
- 用Objective-C的Category特性添加类的属性
http://www.cnblogs.com/wupher/archive/2013/01/05/2845338.html Category是Objective-C中常用的语法特性,通过它可以很方便的 ...
- codeforce 230D Dijsktra
#include <cstdio> #include <cstring> #include <iostream> #include <cmath> #i ...
- Java Executor 框架学习总结
大多数并发都是通过任务执行的方式来实现的.一般有两种方式执行任务:串行和并行. class SingleThreadWebServer { public static void main(String ...
- Android摄像头抓取图像的格式
android.hardware.Camera.PreviewCallback /** * Callback interface used to deliver copies of preview f ...