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"> ...
随机推荐
- sh_07_买苹果增强版
sh_07_买苹果增强版 # 1. 输入苹果的单价 price_str = input("苹果的单价:") # 2. 输入苹果的重量 weight_str = input(&quo ...
- 6.10&&6.12考试反思
考试结果:6.10AK 6.12:100(评测机)200(本地&&兼容评测机版) OI的考试做题流程无非是: 通读全部题目——>找一个最有把握/最简单的题——>分析思考—— ...
- [CSP-S模拟测试]:辣鸡(ljh) （暴力）
题目描述 辣鸡$ljh\ NOI$之后就退役了,然后就滚去学文化课了.然而在上化学课的时候,数学和化学都不好的$ljh$却被一道简单题难住了,受到了大佬的嘲笑.题目描述是这样的:在一个二维平面上有一层 ...
- 大数据笔记（九）——Mapreduce的高级特性（B）
二.排序 对象排序 员工数据 Employee.java ----> 作为key2输出 需求:按照部门和薪水升序排列 Employee.java package mr.object; impo ...
- 前端进阶系列(二):css常见布局解决方案
水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...
- postgresql中实现oracle SYS_CONNECT_BY_PATH
oracle: select sys_connect_by_path(t2.ID, '/') as PATH, t1.id from HTD_DEVICETYPE_RELATI ...
- Junit单元测试的使用
这里拿Dynamic Web Project项目来演示,首先创建一个Dynamic Web Project项目,起名,点next, 继续点next, 将web.xml文件勾选,finish, 接下来在 ...
- 图书-软件架构：《Design Patterns: Elements of Reusable Object-Oriented Software》（即后述《设计模式》一书）
ylbtech-图书-软件架构:<Design Patterns: Elements of Reusable Object-Oriented Software>(即后述<设计模式&g ...
- python 字典zip使用
- 001/Docker入门（Mooc）
docker官网:https://www.docker.com/ 1.什么是docker 2.Docker思想 ==> [1].集装箱:保证程序完整(不缺东西,如配置文件等). [2]. ...