实现全选-反选

在日常生活我们会遇到需要全选-反选的地方，其实用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实现全选-反选的更多相关文章

  1. 表单javascript checkbox全选 反选 全不选

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  2. JavaScript 实现全选 / 反选功能

    JavaScript 实现全选 / 反选功能 版权声明:未经授权,内容严禁转载! 构建主体界面 编写 HTML 代码 和 CSS 代码,设计主题界面 <style> #user { wid ...

  3. JavaScript、全选反选-课堂笔记

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. 用javascript实现全选/反选组件

    以下是本人制作的全选/反选 组件,供广大同行参考.指正: 效果如图: 在实现的过程中,全选和全部取消选中这两个功能较为简单,只需用for循环遍历所有复选框为true或false即可.反选也较为简单,也 ...

  5. JavaScript下全选反选的Demo程序里实现checkmeonly函数 DOM

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. javascript总结41:表格全选反选,经典案例详解

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  7. JavaScript Web API 全选反选案例

    全选反选 全选和反选功能,在开发中可以说是应用得非常多的,以下通过案例分解,学习如何使用JS实现全选反选功能. 该功能可分为如下三大步骤: 1.全选 1.1 获取父checkbox,注册点击事件 1. ...

  8. jQuery全选/反选checkbox

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. Dom操作--全选反选

    我们经常会在网站上遇到一些多选的情况,下面我就来说说使用Dom写全选反选的思路. 全选思路:首先,我们来分析一下知道,当我们点击"全选"复选框的时候,所有的复选框应该都被选中,那我 ...

随机推荐

  1. spring boot:用cookie保存i18n信息避免每次请求时传递参数(spring boot 2.3.3)

    一,用cookie保存i18n信息的优点? 当开发一个web项目(非api站)时,如果把i18n的选择信息保存到cookie, 则不需要在每次发送请求时都传递所选择语言的参数, 也不需要增加heade ...

  2. 第二章 OSI参考模型

    一.产生背景 1.伴随着计算机网络的飞跃发展,各大厂商根据自己的协议生产出了不同的硬件和软件 2.为了实现网络设备间的互相通讯,ISO和IEEE相继提出了OSI参考模型及其TCP/IP模型 二.OSI ...

  3. java开发环境配置，看这一篇就足够了！

    可能平时大家对于安装环境的需求不是那么强烈,但是当你换了一台新电脑时,你就会发现怎么也得花费你几个小时乃至半天一天的时间.故此整理此篇文章,给有需要的小伙伴 注:本文皆win10环境 (1).JDK的 ...

  4. 用Hugo在gitee上构建博客（Windows环境下）

    目录 用Hugo在gitee上构建博客(Windows环境下) 1.为什么要用gitee? 2.安装git 3.安装Hugo 4.创建远程仓库 5.搭建博客 (以下所有命令都在git bash中输入) ...

  5. 想买保时捷的运维李先生学Java性能之 JIT即时编译器

    前言 本文记录日常学习<深入理解Java虚拟机>,不知道为啥感觉看一遍也就过了,喜欢动动手理解理解,这样才有点感觉,静不下心来的时候,看书抄书也可以用这个办法. 一.什么是JIT(Just ...

  6. 洛谷 p6858 深海少女与胖头鱼 洛谷月赛 期望dp

    洛谷10月月赛 2 t2 深海少女与胖头鱼 题目链接 参考资料:洛谷10月赛2讲评ppt; 本篇题解考完那天就开始写,断断续续写到今天才写完 本题作为基础的期望dp题,用来学习期望dp还是很不错的 ( ...

  7. mysql一些使用函数（不断更新）

    1.中文转拼音码,多用于将姓名转成拼音(例如:刘德华:liudehua) /*建立拼音码表*/ CREATE TABLE IF NOT EXISTS `t_base_pinyin` ( `pin_yi ...

  8. Win32之创建进程

    CreateProcess函数介绍 BOOL CreateProcessA( LPCSTR lpApplicationName, //可执行文件的名称完整的路径+程序名字) LPSTR lpComma ...

  9. python引用方法赋值问题探究

    python脚本编写中,经常会遇到引用一个模块的方法的场景.引用的方法里到底赋不赋值曾经困扰了我好久. 最近利用python写了一个接口自动化测试脚本,在查阅观看多篇博文和视频后解决了封装方法引用的问 ...

  10. vue自定义指令 默认图片

    /**  * 检测图片是否存在  * @param url  */ function imageIsExist(url) {     return new Promise((resolve) => ...