学习内容：

需求

用 JavaScript 实现全选、反选、多选

实现代码

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>checkbox</title>

	<script type="text/javascript">

		function checkChange(element) {

			// 通过 getElementsByName("hobby") 获取 input 标签数组对象

			var hobbys = document.getElementsByName("hobby");

			for(var item of hobbys) {

				// 把每个 hobby 的元素的状态修改成跟全选一致

				item.checked = element.checked;

			}

		}

		function checkAll(element) {

			var hobbys = document.getElementsByName("hobby");

			for(var i = 0; i < hobbys.length; i++) {

				if(element) {

					// 把每个 hobby 的元素的状态修改成和选项一致

					hobbys[i].checked = true;

				}

			}

		}

		function checkUnAll() {

			var hobbys = document.getElementsByName("hobby");

			for(var item of hobbys) {

				// 把每个 hobby 的元素的状态修改成跟之前相反

				item.checked = !item.checked;

			}

		}

	</script>

</head>

<body>

	请选择你的爱好:<br/>

	<input type="checkbox" onchange="checkChange(this)" id="checkAll"/>全选/全不选<br/>

	<div>

		<input type="checkbox" name="hobby"/>JAVA&nbsp;

		<input type="checkbox" name="hobby"/>打篮球&nbsp;

		<input type="checkbox" name="hobby"/>上网&nbsp;

		<input type="checkbox" name="hobby"/>撩妹&nbsp;

	</div>

	<div>

		<input type="button" id="btn_checkAll" onclick="checkAll(true)" value="全选"/>

		<input type="button" onclick="checkAll(false)" value="全不选"/>

		<input type="button" onclick="checkUnAll()" value="反选"/>

	</div>

</body>

</html>

总结：

以上就是用 JS对全选、反选、多选，代码的简单实现了，仅供参考，欢迎讨论交流。

用 JS（JavaScript ）实现多选、全选、反选的更多相关文章

  1. JavaScript自动计算价格和全选

    JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...

  2. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  3. Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  4. Javascript实现CheckBox的全选与取消全选的代码(转)

    js函数 复制代码 代码如下: <script type="text/javascript"> function checkAll(name) { var el = d ...

  5. 分别用js和jq实现百度全选反选效果

    js实现过程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  6. js分类多选全选

    效果如图: HTML代码: <div class="form-group quanxian-wrap"> <label>项目</label> & ...

  7. JavaScript案例四：全选练习

    JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...

  8. js实现表单项的全选、反选以及删除操作

    <html> <head> <title>test</title> <script language="javascript" ...

  9. Js 实战3（实现全选）

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs ...

  10. 点滴积累【JS】---JS小功能(checkbox实现全选和全取消)

    效果: 代码: <head runat="server"> <title></title> <script type="text ...

随机推荐

  1. unittest的discover方法批量执行02

    前言 我们在写用例的时候,单个脚本的用例好执行,那么多个脚本的时候,如何批量执行呢?这时候就需要用到unittet里面的discover方法来加载用例了. 加载用例后,用unittest里面的Text ...

  2. 浏览器中 Http缓存

    分类: web缓存主要有:数据库缓存.服务器缓存(代理服务器缓存.CDN缓存),浏览器缓存. 数据库缓存 当web应用的关系比较复杂,数据库中的表很多的时候,如果频繁进行数据库查询,很容易导致数据库不 ...

  3. shuffle()和sns.FacetGrid()定义

  4. 《手把手教你》系列基础篇（七十七）-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 上篇（详解教程）

    1.简介 今天主要是讲解和分享:TestNG中一个类中有多个测试方法的时候,多个测试方法的执行顺序或者依赖关系的问题.如果不用dependsOnMethods,testNG会自动根据@Test方法名称 ...

  5. k8s集群Job负载 支持多个 Pod 可靠的并发执行，如何权衡利弊选择适合的并行计算模式？

    k8s的Job负载 支持多个 Pod 可靠的并发执行,如何权衡利弊选择适合的并行计算模式? 简单聊聊你对工作负载Job的理解? Job 支持多个 Pod 可靠的并发执行,如何权衡利弊选择适合的并行计算 ...

  6. 七天接手react项目 系列 —— react 脚手架创建项目

    其他章节请看: 七天接手react项目 系列 react 脚手架创建项目 前面我们一直通过 script 的方式学习 react 基础知识,而真实项目通常是基于脚手架进行开发. 本篇首先通过 reac ...

  7. mac电脑sublime text3安装pretty json插件

    因http://packagecontrol.io/地址被墙无法实现自动安装,导致sublime Text3安装插件非常麻烦,总是出现There Are No Packages Available F ...

  8. RabbitMQ入门-5.6-课堂笔记-01

  9. spring——IOC理论

    这里主要是对于IOC理论提出的一个认识 dao接口 public interface Fruit { String getFruit(); } dao接口的实现类 public class Fruit ...

  10. 你应该知道的Redis过期键和过期策略

    今天,我和大家分享一篇关于 Redis 有关过期键的内容,主要有四个内容: 如何设置过期键 如何取消设置的过期时间 过期键的过期策略是怎样的 RDB.AOF 和复制对过期键的处理又是怎样的 设置键的生 ...