JavaScript基础6——全选示例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>全选示例</title>
</head>
<body>
<input type="checkbox" id="ckBox" onclick="selAllNo()" />全选/全不选
<br>
<input type="checkbox" name="hobby" onclick="check()" />篮球
<br>
<input type="checkbox" name="hobby" onclick="check()" />足球
<br>
<input type="checkbox" name="hobby" onclick="check()" />羽毛球
<br>
<input type="checkbox" name="hobby" onclick="check()" />乒乓球
<br>
<input type="button" value="全选" onclick="selAll()" />
<input type="button" value="全不选" onclick="selNo()" />
<input type="button" value="反选" onclick="deSel()" />
<script type="text/javascript">
// 获取全选/全不选复选框
var ckBox = document.getElementById("ckBox");
// 获取到要操作的复选框
var hobbies = document.getElementsByName("hobby");
// 如果有一个没有选，那么去掉全选/全不选复选框
function check() {
for (var i = 0; i < hobbies.length; i++) {
// 只要有一个未选中，就设置复选框为未选中，并跳出循环
if (!hobbies[i].checked) {
ckBox.checked = false;
break;
} else {
// 如果全部都为选中，设置复选框为选中
ckBox.checked = true;
}
}
}
// 全选
function selAll() {
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
ckBox.checked = true;
}
// 全不选
function selNo() {
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
ckBox.checked = false;
}
// 全选/全不选
function selAllNo() {
if (ckBox.checked) {
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = true;
}
} else {
for (var i = 0; i < hobbies.length; i++) {
hobbies[i].checked = false;
}
}
}
// 反选
function deSel() {
for (var i = 0; i < hobbies.length; i++) {
// 选中的设为未选中，未选中的设为选中
hobbies[i].checked = (hobbies[i].checked) ? false : true;
}
// 检查反选是否有未选中的
check();
}
</script>
</body>
</html>
JavaScript基础6——全选示例的更多相关文章
- javascript: checked 不可全选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- JavaScript实现单击全选 ,再次点击取消全选
以下为实现思路,已测试,供参考 var allSet = document.getElementById('allSet');//获取全选按钮元素 var a = allSe ...
- html javascript checkbox实现全选功能
html代码 <input type="checkbox" id="all" />all</input> <input type= ...
- JavaScript CheckBox实现全选和部分选择
<html> <head> <script> function BatchAddToBasket() { var questionNums = ''; var ch ...
- jQuery/javascript实现全选全不选
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
- JavaScript案例四：全选练习
JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...
- JavaScript 全选函数的实现
Html代码: <table id="purchase-info" class="table table-bordered table-hover table-st ...
- javascript 全选与反选
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> ...
随机推荐
- 【PowerOJ1746&网络流24题】航空路线问题（费用流）
题意: 思路: [问题分析] 求最长两条不相交路径,用最大费用最大流解决. [建模方法] 把第i个城市拆分成两个顶点<i.a>,<i.b>. 1.对于每个城市i,连接(< ...
- Spring Boot 异步方法的调用
Spring Boot 异步方法的调用 参考资料: 1.Spring Boot中使用@Async实现异步调用 使用方法 两个步骤: 1.开启配置 @EnableAsync,这一步特别容易忘记,导致测试 ...
- 关于Java泛型实现原理的思考与一般用法示例总结
面向对象的一个重要目标是对代码重用的支持.支持这个目标的一个重要机制就是泛型机制.在1.5版本之前,java并没有直接支持泛型实现,泛型编程的实现时通过使用继承的一些基本概念来完成的. 这种方式的局限 ...
- 关闭Linux无用端口
关闭系统不必要的端口,增强系统安全,此处以关闭111端口为例进行说明. 1).查看本机正在监听的端口: [root@b ~]# netstat -tlnup Active Internet conne ...
- 安装fedora23后的一些杂项设置
Boxes是创建虚拟机的技术 tweak: 拧, 捏; 微调 he gave the boy's ear a painful tweak. it's a small tweak over the ra ...
- 在mpvue或者Vue中使用VUEX
第一个页面Index,主页哦 import Vue from'vue' import Vuex from'vuex' import getters from'./getters' import sta ...
- mysql转化时间戳毫秒到秒
其实我感觉都不值得写一篇随笔的,但是呢,我就是想写 其实就是截取毫秒时间戳的前十位就是我们是秒时间戳啦 update 表 set 表字段 = substr(表字段,1,10) 好简单 嫌弃中
- python值的引用传递和go语言的值传递
一:值传递 实参a 原本指向地址 1638212,代表1638212这个地址的值是3.在swap函数中,实参a将值拷贝给形参a,形参a此时也在内存中拥有地址,地址= xxxx,值为3,在所有的函数体内 ...
- 测开之路九十九：js函数、事件、window窗体对象
函数:function 函数名(参数列表) 事件 单击:onclick()表单提交:onsubmit()鼠标经过:onmouseover()值改表时:onchange() window窗体对象转跳:w ...
- GMSSL中生成SM2或RSA1024或RSA2048的证书相关命令
1.生成KEY:gmssl sm2 -genkey -out 01.root.pemgmssl genrsa -out 01.root_plain.key 2048gmssl genrsa -out ...