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 ...
随机推荐
- 用户IP地址的三个属性的区别(HTTP_X_FORWARDED_FOR,HTTP_VIA,REM_addr
转自http://www.blogjava.net/Todd/archive/2009/10/09/297590.html 一.没有使用代理服务器的情况: REMOTE_ADDR = 您的 IP ...
- windows平台下安装、编译、使用mongodb C++ driver
本博客将记录在Win8.1 ,VS2013环境下编译.配置mongodb C++ driver的流程. 1.下载预备 下载Boost:http://sourceforge.net/projects/b ...
- google closure--继承模块二：goog.base()demo分析
昨天已经讲到了goog.inherits(),主要负责通过为子构造函数原型对象通过原型链继承父构造函数的原型对象的方法,完成继承.这样继承只完成了原型对象的继承,看看之前的那张图: 是不是感觉父构造函 ...
- java基础之 重排序
重排序通常是编译器或运行时环境为了优化程序性能而采取的对指令进行重新排序执行的一种手段.重排序分为两类:编译期重排序和运行期重排序,分别对应编译时和运行时环境. 在并发程序中,程序员会特别关注不同进程 ...
- Visual Studio 下C#编译器在解析属性名时如果增加一个get_[您的另一个已经包含在类中属性名]的属性会报错，微软大哥这是什么鬼？
假设在在我们的vs环境新建一个类 copy以下代码,表面看好像一切都没有问题. using System; using System.Collections.Generic; using System ...
- Visual Studio 2015 Update 3 ISO
http://download.microsoft.com/download/c/2/6/c26892d8-6a5d-4871-9d46-629f4d430146/vs2015.3.vsu.iso
- Activity Intent相关FLAG介绍
先首先简单介绍下Task和Activity的关系 Task就像一个容器,而Activity就相当与填充这个容器的东西,第一个东西(Activity)则会处于最下面,最后添加的东西(Activity ...
- Android系统文件夹组织结构
- Linq Group By
TableA { Id int, Name string, Group int Score int } 从 Id Name Group Score 1 张三 A 70 2 李四 A 80 3 王五 ...
- block的常见用法
一.声明和定义 1.声明 声明方式:返回值(^block)(参数).声明时,参数变量名可以省略:使用时,参数变量名不能省略,不然会无法调用传入的参数 void(^block)(); void(^blo ...