实现全选-反选

在日常生活我们会遇到需要全选-反选的地方，其实用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. docker-compose启动consul集群

    version: '2.0' services: consul-server1: image: consul:latest hostname: "consul-server1" p ...

  2. Serializable使用

    android的另一个序列化Serializable比较简单,实现它的接口,然后生成所有成员变量的方法,再生成所有成员变量的getset方法,serializable可以存储对象,所以下面代码传递了一 ...

  3. .NET CORE WebAPI JWT身份验证

    一.appsettings.Json文件配置 配置JWT公用参数. 1 /*JWT设置*/ 2 "JwtSetting": { 3 "Issuer": &quo ...

  4. VueX（简）

    最近又看了vue的文档,借此整理一下知识.用于自我加深理解 vueX是vue官方推出的状态管理机制. 上面一张图是核心 主要为: State:存储数据 Mutation: 更改数据 Action: 暴 ...

  5. Java基础之类型转换总结篇

    Java中,经常可以遇到类型转换的场景,从变量的定义到复制.数值变量的计算到方法的参数传递.基类与派生类间的造型等,随处可见类型转换的身影.Java中的类型转换在Java编码中具有重要的作用.    ...

  6. NB-IoT的同步信号解析

    NB-IoT的小区搜索和LTE的小区搜索是类似的,每个UE都是通过对同步信号的检测,来实现与小区时间和频率上的同步,以此来获取小区的ID.NB-IoT的同步信号包括NPSS和NSSS. NPSS用于完 ...

  7. Java学习的第六天

    1.今天学习了各种运算符, 还有选择结构,循环结构 2.今天学习没有遇到困难. 3.明天学习数组和第三章的开头一部分.

  8. git提交后文件夹显示灰色无法打开的解决办法

    上传完本地文件到gitee线上后发现如下情况,文件夹显示为灰色并且无法访问. xxx@xxx 的灰色文件 问题原因 : 无法点击的灰色文件夹中含有 .git 文件 即在本地初始化的仓库(使用 git ...

  9. Flask中的RESTFul

    RESTFul 1.什么是RESTFul? 1.1 简介 REST即表述性状态传递(英文:Representational State Transfer, 简称REST)是Roy Fielding博士 ...

  10. js——事件循环

    JS-事件循环 js运行的环境称之为宿主环境. 执行栈 :call stack ,一个数据结构,用于存放各种函数的执行环境,每一个函数执行之前他的相关信息会加入到执行栈中,函数调用之前,创建执行环境, ...