JS——全选与反选
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>全选反选</title>
</head>
<body> <input type="button" value="全选" id="all">
<input type="button" value="反选" id="reverse">
<input type="checkbox" id="flagCheck">
<ul id="checkboxList">
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
<li><input type="checkbox"></li>
</ul>
<p>
布尔属性，只要name即可，值可为空
checked,selected,readonly,disabled....
</p>
<script type="text/javascript">
//1.找节点
var allBtn = document.querySelectorAll("#all")[0];
var reverseBtn = document.querySelector("#reverse");
var flagCheck = document.getElementById("flagCheck");
var checkList = document.querySelectorAll("#checkboxList input");
function checkAll() {
for(var j = 0; j < checkList.length; j++) {
if(!checkList[j].checked) {
break;
}
}
if(j == checkList.length) {
// alert("全部为真")
flagCheck.checked = true;
}else {
// alert("至少一个不为真");
flagCheck.checked = false;
}
}
//2.加事件
//全选
allBtn.onclick = function() {
if(flagCheck.checked) {
flagCheck.checked = false;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = false;
}
}else {
flagCheck.checked = true;
for(var i = 0; i < checkList.length; i++) {
checkList[i].checked = true;
}
} }
//反选
reverseBtn.onclick = function() {
for(var i = 0; i < checkList.length; i++) {
if(checkList[i].checked) {
checkList[i].checked = false;
}else {
checkList[i].checked = true;
}
}
//执行检查所有checkList是否被选上了
checkAll();
} for(var i = 0; i < checkList.length; i++) {
checkList[i].onclick = checkAll;
}
</script>
</body>
</html>
效果图如下
上传这个是为了到某一天要用时忘记了也能找到笔记回忆起来(*^__^*) 嘻嘻！
JS——全选与反选的更多相关文章
- 简单JS全选、反选代码
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org ...
- js全选与反选
HTML结构: <!doctype html><html><head><meta charset="utf-8"><title ...
- js正则、js全选、反选、全不选、ajax批删
<button onclick="fun1()">全选</button><button onclick="fun2()">全 ...
- js及jQuery实现checkbox的全选、反选和全不选
html代码: <label><input type="checkbox" id="all"/>全选</label> < ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- JS实现全选、反选、不选
JS实现全选.反选.不选 效果图: 代码如下,复制即可使用: <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- 前端之 JS 实现全选、反选、取消选中
需求 制作如下可选表格,实现“全选”.“反选”.“取消”功能 代码示例 <!DOCTYPE html> <html lang="zh-CN"> <he ...
- elementUI+JS实现全选与反选
在实际项目开发过程中,遇到的需求,需要实现全选以及取消全选等功能,主要使用ElementUI + JS来实现,具体代码如下: <!DOCTYPE html> <html lang=& ...
- 复选框全选、反选及根据值JS控制复选框默认选中事件
HTML代码 <div class="col-sm-7"> <input type="checkbox" id="allAndNot ...
随机推荐
- java获取当前时间前一周、前一月、前一年的时间
SimpleDateFormat format = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss"); Calendar c = Calend ...
- Eclipse里面Outline中图标的含义
先说颜色: 绿色:public 黄色:protected 蓝色:no modifier 红色:private 再说形状: 实心:method 空心:variable 实心中间有字母C:c ...
- 练习sql语句的好去处——http://www.sqlzoo.cn/
sql语句的编写需要按照实际的例子来练习. 如果自己来做准备,需要你自己搭好数据库,建好库和表,还要填入数据,最后自己想出题目和正确答案. 不过,现在我发现了一个好去处,http://www.sqlz ...
- 查询java 类加载的路径
在Spring 3.x企业应用开发实战中看到一个能经常用到的jsp,记录下,查看类的加载路径, 在jar包冲突引起的奇葩问题时很好用.使用方法 srcAdd.jsp?className=java.ne ...
- runtime学习实战一：类的属性进行归档解档
#import <Foundation/Foundation.h> @interface PYPerson : NSObject @property (nonatomic, assign) ...
- Scala的第一步
第一步:学习使用Scala解释器 开始Scala最简单的方法是使用Scala解释器,它是一个编写Scala表达式和程序的交互式“shell”.在使用Scala之前需要安装Scala,可以参考 Firs ...
- javaSE学习路线
Java SE大致可分为以下几块内容: n 对象导论:如何用面向对象的思路来开发 n 深入JVM:Java运行机制以及JVM原理 n 面向对象的特征:封装.继承.抽象.多态 n 数组和容器:容 ...
- JS总结 本地对象2 BOM DOM
string对象 定义一个字符: var str = "world"; str.length 返回字符长度,5 str.charAt(2) 返回字符串第2个字符(从0开始,下 ...
- Android Full Screen
http://talentprince.github.io/blog/2015/01/07/android-activity-quan-ping-fang-fa-zong-jie/
- uboot(二）: Uboot-arm-start.s分析
声明:该贴是通过参考其他人的帖子整理出来,从中我加深了对uboot的理解,我知道对其他人一定也是有很大的帮助,不敢私藏,如果里面的注释有什么错误请给我回复,我再加以修改.有些部分可能还没解释清楚,如果 ...