js实现复选框全选
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实现复选框全选的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- js 判断 复选框全选、全不选、反选、必选一个
一个挺 使用的 js 代码片段, 判断 复选框全选.全不选.反选.必选一个 记录下, 搬来的 思路: 修改数据的 选中与否状态, 拿到所有的输入框,看是否有选中的状态 <html> & ...
- FineReport——JS二次开发(复选框全选)
在进行查询结果选择的时候,我们经常会用到复选框控件,对于如何实现复选框全选,基本思路: 在复选框中的初始化事件中把控件加入到一个全局数组里,然后在全选复选框里对数组里的控件进行遍历赋值. 首先,定义两 ...
- js实现复选框全选/全不选/反选
js实现复选框全选/全不选/反选 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- checkbox复选框全选批量删除
多选框全选实现批量删除 html代码 <body> <form action="" method="post" name="Form ...
- jQuery 复选框全选/取消全选/反选
jQuery实现的复选框全选/取消全选/反选及获得选择的值. 完整代码: <!DOCTYPE html> <html> <head> <script type ...
- jQuery实现复选框 全选、反选、全不选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- js进阶 9-16 如何实现多选框全选和取消
js进阶 9-16 如何实现多选框全选和取消 一.总结 一句话总结:选择取到每一个checkbox的值,然后赋值为true或者false就好. 1.如何实现多选框全选和取消? 选择取到每一个check ...
- jQuery 前端复选框 全选 反选 下拉菜单联动
jQuery 页面中复选框全选.反选.下拉联动(级联) <!DOCTYPE html> <html lang="en"> <head> < ...
随机推荐
- 基于Swiper 2.7.6实现的带缩略图功能的轮播图
非原创,只能适合PC端,如果是移动端,只需要修改界面的大小即可.界面如下: 链接:http://pan.baidu.com/s/1pK9XdUV 密码:jsyk
- Bzoj3041 水叮当的舞步
Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 132 Solved: 75 Description 水叮当得到了一块五颜六色的格子形地毯作为生日礼物 ...
- http请求与响应(content-type)
http请求信息由浏览器把地址栏URL信息和页面(html.jsp.asp)组装成http请求消息体(如下). <request-line>(请求消息行)<headers>(请 ...
- Nginx 颁发自签证书
首先,确保安装了OpenSSL库,并且安装Nginx时使用了–with-http_ssl_module参数. 1:进入生成证书的目录 cd /usr/local/nginx/conf 2:使用open ...
- 轮播插件unsilder 源码解析(二)
$.fn._active = function(className) { //当前的添加class,相邻元素去除class return this.addClass(className).siblin ...
- shell条件判断与流程控制
一 条件判断式语句 1.按文件类型进行判断 测试类型 作用 -b 文件 判断文件是否存在,并且是否为块设备文件(是块设备文件为真) -c 文件 判断文件是否存在,并且是否为字符设备文件(是字符设备设备 ...
- orpsocv2 从ROM(bootrom)启动分析--以atlys板子的启动为例子
1 复位后的启动地址 1) 复位后,启动地址在or1200_defines.v最后宏定义,atlys板子的目录:orpsocv2\boards\xilinx\atlys\rtl\verilog\inc ...
- 在Android中Intent的概念及应用(一)——显示Intent和隐式Intent
Intent寻找目标组件的两种方式: 显式Intent:通过指定Intent组件名称来实现的,它一般用在知道目标组件名称的前提下,一般是在相同的应用程序内部实现的. 隐式Intent:通过Intent ...
- 负载均衡-基础-一致性哈希算法及java实现
一致性hash算法,参考: http://www.blogjava.net/hello-yun/archive/2012/10/10/389289.html 针对这篇文章,加入了自己的理解,在原有的代 ...
- react+redux官方实例TODO从最简单的入门(6)-- 完结
通过实现了增-->删-->改-->查,对react结合redux的机制差不多已经了解,那么把剩下的功能一起完成吧 全选 1.声明状态,这个是全选状态 2.action约定 3.red ...