纯javascript实现选择框的全选与反选
HTML部分
<div id="wrap_input_box" >
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br>
<input type="checkbox"><br> </div>
<label for="olabel">选择全部 一键上路<input type="checkbox" id= 'all'></label>
js部分
var oinput = document.getElementById('all');
// var oinput_s = document.getElementsByTagName('input');
var oinput_s = document.querySelectorAll('#wrap_input_box>input');
// console.log(oinput_s[6]);
// 先设置点击全选按钮后 实现所有的选择标签显示选择 取消点击后 取消所有标签选择
oinput.onclick = function(){
if (this.checked){
for (var i =0;i<oinput_s.length;i++){
oinput_s[i].checked=true;
}
}else{
for (var i =0;i<oinput_s.length;i++){
oinput_s[i].checked=false;
}
}
}
// 下面设置的是 每个小标签如果在全选状态下取消选择其中的某一个 对应的按钮的状态会变为没有全选
// 给每个小选择标签设置绑定点击事件
for(var j = 0;j<oinput_s.length;j++){
oinput_s[j].onclick = function (){
//定义一个标志位 这个标志位 用来判断后面的选择按钮的状态
var flag = true;
//遍历每个小选择标签 判断 如果每一个小标签是非选择状态 将标志位改为 false 状态 即对应为未选择
for (k=0;k<oinput_s.length;k++){
if(!oinput_s[k].checked){
flag=false;
break;
} } if(flag){
oinput.checked=true;
}else{
oinput.checked=false;
} }
}
纯javascript实现选择框的全选与反选的更多相关文章
- s2选择框的全选和反选jQuery
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【jQuery】复选框的全选、反选,推断哪些复选框被选中
本文与<[JavaScript]复选框的全选.反选.推断哪些复选框被选中>(点击打开链接)为姊妹篇,把里面内容再与jQuery框架中实现一次,相同做到例如以下的效果: 布局还是相同的布局, ...
- jQuery实现复选框的全选、反选、并且根据复选框的<checked属性>控制多个对应div的显示/隐藏
<!doctype html><html> <head> <meta charset="utf-8"> <title>j ...
- angular4 checkbox复选框的全选,反选及个别选择
<label><input type="checkbox" name="" [(ngModel)]="master"> ...
- jquery简单实现复选框的全选与反选
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- jQuery 实现复选框的全选与反选
<script> //实现全选与反选 $(".allAndNotAll").click(function () { if ($(this).prop("che ...
- JavaScript实现复选框的全选,反选,不选
<script> window.onload=function(){ var CheckAll=document.getElementById('All'); var UnCheck=do ...
- dom实例,模态框,全选,反选,取消
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- jQuery实现复选框的全选、反选功能
<ul id="list"> <li><label><input type="checkbox" value=&quo ...
随机推荐
- Android 图片旋转
拍照后的照片有时被系统旋转,纠正步骤如下: 1.先读取图片文件被旋转的角度: /** * 通过ExifInterface类读取图片文件的被旋转角度 * @param path : 图片文件的路径 * ...
- PHP把下划线分隔命名的字符串与驼峰式命名互转
最近项目使用symfony框架,这个框架对数据库的操作在这个团队里使用的是ORM进行操作,说实话使用ORM的开发效率和运行效率不一定高多少,到是它的实体命名和现有数据库字段的命名不太一样,ORM实体属 ...
- Spring MVC基本配置和实践(一)
一.Spring MVC介绍 1. Spring MVC是什么? The Spring Web MVC framework和Struts2都属于表现层的框架,它是Spring框架的一部分,我们可以从S ...
- springIOC学习笔记
目录 目的 引用 xml方式 配置 配置实例 使用 底层简单模拟 全注解方式 基础 包扫描方式 配置 使用 config方式 配置 使用 spring整合junit 引用 示例 目的 让spring统 ...
- 重写UITableViewCell子类中属性的setter方法来实现隐藏或显示该cell中的某些控件
重写UITableViewCell子类中属性的setter方法来实现隐藏或显示该cell中的某些控件 为什么会需要这样子的一种方法来实现隐藏或者显示一个cell中的某些控件呢? 其实,隐藏cell中某 ...
- Redis 集群缓存测试要点--关于 线上 token 失效 BUG 的总结
在测试账户系统过程中遇到了线上大面积用户登录态失效的严重问题,事后对于其原因及测试盲点做了一些总结记录以便以后查阅,总结分为以下7点,其中原理性的解释有些摘自网络. 1.账户系统token失效问题复盘 ...
- 51nod 1437 迈克步
题目链接 先利用单调栈or其他方法找到一个元素g[i]作为最小值的区间,设为[L, R]. 那么长度为R-L+1的组的最大值ans=max(ans,g[i]).但是有一个问题: 比如6这个元素是长度为 ...
- Python定制类(进阶6)
转载请标明出处: http://www.cnblogs.com/why168888/p/6411919.html 本文出自:[Edwin博客园] Python定制类(进阶6) 1. python中什么 ...
- CADisplayLink分析
1.固定频率定时器: 2.UI帧率性能检测: 3.cpu动画控制器:
- 【LGP5161】WD与数列
题目 也是可以用\(SAM\)来做的 我们发现要求原串不相交,那么就要求在差分序列里不相交并且不相邻 考虑一下\(SAM\),暴力做法自然是对每一个节点统计其所有\(endpos\)的影响 既然这样我 ...