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"> ...
随机推荐
- SpringBoot的启动简述
一.注解和启动类SpringBootApplication 它是一个复式注解. @Target(ElementType.TYPE) @Retention(RetentionPolicy.RUNTIME ...
- python-*args、**kargs用法
可变位置参数: *args:是一个元组,传入的参数会被放进元组里.可变关键字参数: **kwargs:是一个字典,传入的参数以键值对的形式存放到字典里. def test1(*args): print ...
- 【CF1249F】Maximum Weight Subset（贪心）
题意:给定一棵n个点带点权的树,要求从中选出一个点集,使得这些点两两之间距离都大于K,求最大点权和 n,K<=2e2,1<=a[i]<=1e5 思路:树形DP显然可做,极限是n方,然 ...
- Spring Cloud教程（九）应用程序上下文服务
Spring Boot对于如何使用Spring构建应用程序有一个看法:例如它具有常规配置文件的常规位置,以及用于常见管理和监视任务的端点.Spring Cloud建立在此之上,并添加了一些可能系统中所 ...
- 使用chooseImage上传图片，不压缩，使用原图
参考文章: https://help.aliyun.com/document_detail/92883.html
- Java heap size
今天在性能诊断工作中遇到 Java heap size, 下面是它的相关的概念. 什么是Java heap size ? Java heap size 堆栈大小, 指Java 虚拟机的内存大小.我的理 ...
- 最近使用的两个工具 winscp和xshell
最近在编译MONO源码时用到了这两个工具,感觉挺好,记录备忘 WINSCP 长这样 用于可视化的查看和操作远程服务器上的文件 xshell用于命令行下操作远程服务器,服务器的同学好多在用这个.命令行是 ...
- Stream 源码分析
Stream 支持顺序和并行聚合操作的一组元素序列. 1)operations:支持在单个元素上执行的操作,流操作分为中间操作和终止操作 1-1)中间操作: 1-1-1)无状态:unordered() ...
- DRF的路由生成类的使用
DRF路由生成类的使用 对于视图集ViewSet,我们除了可以自己手动指明请求方式与动作action之间的对应关系外,还可以使用Routers来帮助我们快速实现路由信息. REST framework ...
- Java 关键字列表
字 描述 abstract 抽象方法,抽象类的修饰符 assert 断言条件是否满足 boolean 布尔数据类型 break 跳出循环或者label代码段 byte 8-bit 有符号数据类型 ca ...