用JavaScript实现全选-反选
实现全选-反选
在日常生活我们会遇到需要全选-反选的地方，其实用JavaScript也能实现。
样式如下所示：
样式代码如下所示：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>全选-反选</title>
</head>
<body>
<h2>请选择您的兴趣爱好</h2>
<input type="checkbox" value="全选" id="chkAll"/><label for="chkAll">全选</label>
<input type="button" value="反选" id="reverse" />
<ul id="favors">
<li><input type="checkbox" value="" />打篮球</li>
<li><input type="checkbox" value="" />打篮球</li>
<li><input type="checkbox" value="" />看电影</li>
<li><input type="checkbox" value="" />看书</li>
<li><input type="checkbox" value="" />书法</li>
<li><input type="checkbox" value="" />唱歌</li>
<li><input type="checkbox" value="" />徒步旅行</li>
</ul>
</body>
</html>
JavaScript部分如下所示：
function $(id){
return document.getElementById(id);
}
window.onload = function(){
$("chkAll").onclick = function(){
var fvs = $("favors").getElementsByTagName("input");
for (var i = 0; i < fvs.length; i++) {
fvs[i].checked = $("chkAll").checked;
};
}
$("reverse").onclick = function(){
var ipts = $("favors").getElementsByTagName("input");
for (var i = 0; i < ipts.length; i++) {
ipts[i].checked = !ipts[i].checked;
};
}
var fvs = $("favors").getElementsByTagName("input");
for (var i = 0; i < fvs.length; i++) {
fvs[i].onclick = function(){
var isChkAll = true;
for (var i = 0; i < fvs.length; i++) {
if(!fvs[i].checked){
isChkAll = false;
break;
}
};
$("chkAll").checked = isChkAll;
}
};
}
用JavaScript实现全选-反选的更多相关文章
- 表单javascript checkbox全选 反选 全不选
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- JavaScript 实现全选 / 反选功能
JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...
- JavaScript、全选反选-课堂笔记
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用javascript实现全选/反选组件
以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...
- JavaScript下全选反选的Demo程序里实现checkmeonly函数 DOM
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- javascript总结41:表格全选反选,经典案例详解
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- JavaScript Web API 全选反选案例
全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...
- jQuery全选/反选checkbox
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Dom操作--全选反选
我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
随机推荐
- Harbor 安装教程
Harbor 安装教程 一. CentOS设置 1. 更换阿里源 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com ...
- git永久保存账号密码，免去git重复输入账号密码操作
这是我刚刚遇到的问题,每次操git操作都要输入用户名和密码,网上百度了下搜到了方法解决了 方法一:(快捷简单) 直接在git bash 中执行命令:git config --global creden ...
- VS2010下python3的配置
最近突然又想学python,但用惯了vs2010后,十分希望能在vs2010中编译python的程序,于是,秉承着不作到死就不死心的原则就开始了我的配置之旅.但事实上并不难哦?.... 1.首先上场的 ...
- Java 等待/通知机制
等待/通知的目的是确保等待线程从wait()方法返回时能够感知到通知线程对变量所做出的的修改: 等待方遵循如下原则: 1.获取对象的锁 2.如果条件不满足,那么调用对象的wait()方法,被通知后任要 ...
- 单片机串口通信电平不匹配的解决电路，5V 3.3V串口通讯
很早的时候调试串口通讯遇到单片机和模块电压不匹配,信号无法传输,所以整理后来遇到的转换电路.1.最简单的用转换电平IC,可以去淘宝上搜索,有四路的有两路的,比如这个双向电平转换模块 2.根据接触的开发 ...
- JUC---03Lock(一)ReentrantLock
1.什么是锁 在以前实现多线程的同步操作时,都是添加synchronized关键字或者synchronized代码块:而锁实现提供了比使用同步方法和语句可以获得的更广泛的锁操作.它们允许更灵活的结构, ...
- Luogu P5307 [COCI2019] Mobitel
题意 有一个 \(r\times c\) 的矩阵 \(a\),矩阵的每个位置都有一个正整数,求从左上角走到右下角并且满足路径上数字乘积之和大于 \(n\) 的方案数. \(\texttt{Data R ...
- drf 认证校验及源码分析
认证校验 认证校验是十分重要的,如用户如果不登陆就不能访问某些接口. 再比如用户不登陆就不能够对一个接口做哪些操作. drf中认证的写法流程如下: 1.写一个类,继承BaseAuthenticatio ...
- ucore操作系统学习(四) ucore lab4内核线程管理
1. ucore lab4介绍 什么是进程? 现代操作系统为了满足人们对于多道编程的需求,希望在计算机系统上能并发的同时运行多个程序,且彼此间互相不干扰.当一个程序受制于等待I/O完成等事件时,可以让 ...
- 4G DTU的通信距离是多少
4G是现今应用非常广泛的一种通信技术,主要是为广义的远程信息处理提供服务.随着计算机与各种具有处理功能的智能设备在各领域的日益广泛使用,数据通信的应用范围也日益扩大.在物联网领域中,4G是移动设备实现 ...