用 JS（JavaScript ）实现多选、全选、反选
学习内容：
需求
用 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
<input type="checkbox" name="hobby"/>打篮球
<input type="checkbox" name="hobby"/>上网
<input type="checkbox" name="hobby"/>撩妹
</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 ）实现多选、全选、反选的更多相关文章
- JavaScript自动计算价格和全选
JavaScript自动计算价格和全选,价格自增加减,复选框,反选,全选. 如图: 如图: CSS代码 @charset "gb2312"; /* CSS Document */ ...
- 基于JQ的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...
- Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色
上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...
- Javascript实现CheckBox的全选与取消全选的代码(转)
js函数 复制代码 代码如下: <script type="text/javascript"> function checkAll(name) { var el = d ...
- 分别用js和jq实现百度全选反选效果
js实现过程 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...
- js分类多选全选
效果如图: HTML代码: <div class="form-group quanxian-wrap"> <label>项目</label> & ...
- JavaScript案例四：全选练习
JavaScript实现全选,全不选等效果... <!DOCTYPE html> <html> <head> <title>JavaScript全选练习 ...
- js实现表单项的全选、反选以及删除操作
<html> <head> <title>test</title> <script language="javascript" ...
- Js 实战3（实现全选）
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs ...
- 点滴积累【JS】---JS小功能(checkbox实现全选和全取消)
效果: 代码: <head runat="server"> <title></title> <script type="text ...
随机推荐
- 微信小程序知识点汇总
微信小程序常用标签与HTML的对应关系 <div></div> <view></view> <h1></h1>...<h6 ...
- 给定class对象返回该类的实例
今天分享给大家一个实用的开发技巧, 创建一个返回值为泛型的对象构建函数, 要求是传入返回值类的 class 对象. 例如: 平时我们开发接口的时候发现很多响应类里面基本都会有`code`和`error ...
- cve-2018-12613-PhpMyadmin后台文件包含漏洞
前言 刚开始复现这个漏洞的时候是在自己的本机上然后跟着大佬的复现步骤可是没有预期的结果最后看了另一篇文章 当时整个人都麻了 首先何为phpMyAdmin 根据官方的说明phpMy ...
- MongoDB 镜像配置方法
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 MongoDB 是一个基于分布式文件存储的数据库.由 C++ 语言编写.旨在为 WEB 应用提供可扩展的高性能数据存储解决方案. 配置方法 安装 ...
- crash_for_windows_pkg远程代码执行漏洞
漏洞详情 crash_for_windows_pkg由 Electron 提供支持.如果 XSS 负载以代理的名义,我们可以远程执行受害者计算机上的任何 JavaScript 代码. 受影响的冲突版本 ...
- ShardingSphere-Proxy(一)
1.现实中的问题 我们知道数据库的数据,基本80%的业务是查询,20%的业务涵盖了增删改,经过长期的业务变更和积累数据库的数据到达了一定的数量之后,直接影响的是用户与系统的交互,查询时的速度,插入数据 ...
- python3 爬虫 Scrapy库学习1
1生成项目:生成项目文件夹 scrapy startproject 项目名 2生成爬虫文件 scrapy genspider 爬虫名 指定域名 3进入items文件可以输入自己想要爬取的内容比如 te ...
- 修道士与野人问题（BFS广度搜索）
#include "iostream.h" #include "string.h" //定义一个状态节点 typedef struct //存储各个状态 { i ...
- Springmvc入门基础(五) ---controller层注解及返回类型解说
0.@Controller注解 作用:通过@Controller注解,注明该类为controller类,即控制器类,需要被spring扫描,然后注入到IOC容器中,作为Spring的Bean来管理,这 ...
- 怎么获取 Java 程序使用的内存？堆使用的百分比？
可以通过 java.lang.Runtime 类中与内存相关方法来获取剩余的内存,总内存及 最大堆内存.通过这些方法你也可以获取到堆使用的百分比及堆内存的剩余空间. Runtime.freeMemor ...