用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写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...
随机推荐
- linux(centos8):配置docker的cgroup driver为systemd
一,为什么要修改docker的cgroup driver? 1,什么是cgroups? cgroups(Control Groups) 是 linux 内核提供的一种机制 它可以限制.记录任务组所使用 ...
- java-类和数组
java内存划分 Java的内存划分为5个部分: 1.栈 (Stack) : 存放的都是方法中的局部变量,方法的运行一定要在栈当中 局部变量: 方法的参数,或者是方法()内部的变量 作用域: 一旦超出 ...
- 手撸ORM浅谈ORM框架之Add篇
快速传送 手撸ORM浅谈ORM框架之基础篇 手撸ORM浅谈ORM框架之Add篇 手撸ORM浅谈ORM框架之Update篇 手撸ORM浅谈ORM框架之Delete篇 手撸ORM浅谈ORM框架之Query ...
- jq ajax封装
//ajax公共方法,zs 2017-06-14 $.extend({ //比jq的ajax多了的参数: //salert是否在请求成功后弹出后台的SuressStr字段值 //ealertStr:请 ...
- win10 随记
昨天买的台式电脑,今天到了.有点小激动(用了5年的i3笔记本可以稍微休息下了,哈哈) 拿到电脑,和朋友一块,插线...最终连接成功. 记录下过程中的乌龙操作,,, 1.连接好线路后,显示器没反应,(显 ...
- mybatis-plus自动填充
1,给字段添加注解 @TableField(value = "create_time", fill = FieldFill.INSERT) 2,添加填充处理器,需要实现接口Meta ...
- 痞子衡嵌入式：基于恩智浦i.MXRT1010的MP3音乐播放器(RT-Mp3Player)设计
大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是基于i.MXRT1011的MP3播放器参考设计. i.MXRT1011是恩智浦i.MXRT四位数系列的入门型号,虽然是入门级,可也是50 ...
- 设计模式：策略模式（根据参数，调用不同的service接口）
1.定义类容器providers,当spring加载时@PostConstruct(类似构造方法),会先执行init() : 在init()中,反射"cn.jdk18"的所有带自定 ...
- 单例模式的几种实现And反射对其的破坏
一 单例模式概述 (一) 什么是单例模式 单例模式属于创建型模式之一,它提供了一种创建对象的最佳方式 在软件工程中,创建型模式是处理对象创建的设计模式,试图根据实际情况使用合适的方式创建对象.基本的对 ...
- 工业级4G路由器有哪些优势
在金融.电力.邮政以及气象等各大行业中有着更为广泛的应用,并受到人们的高度推崇与青睐,那么工业级4G路由器有哪些优势深受用户的喜欢呢? 1.高稳定性 工业级4G路由器在传输和接收数据时具有较高的稳定性 ...