学习内容：

需求

用 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. react的”Hello World ！“

    本文主要简述react的开始使用 1.引入js文件 <!-- 1.核心文件 --> <script crossorigin src="https://unpkg.com/r ...

  2. 【NLP】

  3. laravel7文件上传至七牛云并保存在本地图片

    HTML代码: <form class="layui-form" action="{{route('doctor.store')}}" method=&q ...

  4. es-kibana基本使用

  5. oneAPI DPC++学习资料和实验平台

    DPC++ 一种新的异构平台,弥补了OPENCL 编写复杂的难题.基于SYCL 抽象层.基于SYCL 有多种实现,其中DPC++是相对成熟的方案. 书籍 由Intel工程师撰写的免费电子图书 Data ...

  6. 关于 jmeter变量是否在引用时候需要加上引号的坑

    今天在玩jmeter的时候,发现一个问题:一个关于 jmeter变量是否在引用时候需要加上引号的坑: 众所周知:jmeter引用变量的时候 需要使用${变量名} 但是:大家是否遇到过有时候变量名外需要 ...

  7. Go 循环语句

    Go 循环语句 一.概述 在不少实际问题中有许多具有规律性的重复操作,因此在程序中就需要重复执行某些语句. 循环程序的流程图: Go 语言提供了以下几种类型循环处理语句: 循环类型 描述 for 循环 ...

  8. @Autowired @Qualifier @Resource

    @Autowired 用于对Bean的属性变量,属性的setter()方法及构造方法进行标注,配合对应的注解处理器完成Bean的自动装配工作.默认按照Bean的类型进行装配. @Resource 其作 ...

  9. python3输出“水仙花数”

    for num in range(100,1000): #如果num在[100,1000)范围,就依次循环取出num的值,第一次取100,下一次取101....最后一次取999 bai = num / ...

  10. Arcmap软件报错：This application cannot run under a virtual machine arcmapr, 但是你并没有使用虚拟机

    在任务栏搜索"启用或关闭 windows 功能",取消 "适用于 Linux 的 Windows 子系统" (有可能还需要 取消 "虚拟机平台&quo ...