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"> ...
随机推荐
- Node.js 版本管理工具——nvm
日常项目开发中,有些项目可能基于node V10 或者 V8 不同的版本: 如果我们手动安装卸载node,这样是不友好. 先放上作者的博客地址 : https://www.cnblogs.com/g ...
- get和post请求方式的区别，常见状态码的整理
get和post的区别 get和post是什么? HTTP协议中的两种发送请求的方法.get从指定的资源请求数据: post向指定的资源提交要被处理的数据. HTTP是什么? 超文本传输协议(HTTP ...
- 内联元素的盒子模型与文档流定位padding属性
内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100 ...
- 前端js怎么实现大文件G级的断点续传（分块上传）和分段下载
需求: 支持大文件批量上传(20G)和下载,同时需要保证上传期间用户电脑不出现卡死等体验: 内网百兆网络上传速度为12MB/S 服务器内存占用低 支持文件夹上传,文件夹中的文件数量达到1万个以上,且包 ...
- Codeforces 916B Jamie and Binary Sequence ( 模拟 && 思维 )
题意 : 给出一个数 n ,要求你用 k 个二的幂来组成这个数,要求输出这 k 个二的幂的指数,如果有多解情况则优先输出最大指数最小的那一个且要求按字典序输出,不存在则输出 No 分析 : 先来说一 ...
- Ubuntu redis 实战 持久化策略 主从复制 以及 故障恢复
推荐文章 redis数据结构学习 redis持久化 redis主从复制 redis哨兵
- HDU 2602 Bone Collector (01背包问题)
原题代号:HDU 2602 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=2602 原题描述: Problem Description Many yea ...
- RedisTemplate访问Redis数据结构（二）——List
RedisTemplate使用ListOperations专门操作list列表.首先初始化spring工厂获得redisTemplate和opsForList private RedisTemplat ...
- CCPC E Problem Buyer
题目描述 有一些区间,还有一些点. 问最小的k使得选出任意k个区间,每个点都可以匹配上区间,一个区间只能匹配一次. 题解 考虑对于每一个点,我们有\(x\)个区间包含它,那么答案的一个下界是\(n-x ...
- matlab 中 ordfilt2() 函数
简介: ordfilt2 是一个二维数据过滤器,首先对根据滤窗口中的非零元素对目标矩阵中的元素进行排序,然后用其中第K(通过参数指定)大的元素代替原数据值,并以此过程遍历目标矩阵中的每一个元素. 一. ...