用 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 ...
随机推荐
- 『现学现忘』Docker相关概念 — 8、虚拟化技术和容器技术的关系
目录 1.云计算中虚拟化技术和容器技术到的关系 2.虚拟机和容器对比 3.虚拟化技术和容器技术区别 1.云计算中虚拟化技术和容器技术到的关系 通过一个关于房间和住人的小问题,我们来初步的理解一下虚拟化 ...
- Python中的super().__init__()
Python里的super().init()有什么用? 简单的说super().__init__(),就是继承父类的init方法,同样可以使用super()去继承其他方法. 下面是三种不同的继承.调用 ...
- Navicat for MySQL 安装软件和破解补丁
软件 链接:https://pan.baidu.com/s/1e8gpbyWM7ISrWpMwsw-MNg 提取码:fag3 安装好 Navicat 将破解文件放到安装目录下,然后双节运行 是的,你 ...
- CSV格式的文件与EXCEL文件的区别
CSV格式的文件与EXCEL文件的区别 Excel CSV 这是一个二进制文件,它保存有关工作簿中所有工作表的信息 CSV代表Comma Separated Values .这是一个纯文本格式,用逗号 ...
- Java进程占用系统内存较高的排查方法
1.通过top 查看具体是哪个进程占用内存较多 Tasks: 65 total, 1 running, 64 sleeping, 0 stopped, 0 zombie %Cpu(s): 2.0 us ...
- 类型转换Java day8
类型转换自动类型转换 从同种类型的低字节类型值直接转换到高类型字节值的转换可自动转换 类型自动转换示例 byte a = 20; int b = a;//不报错可正常转换 有些类型它在计算时默认以指定 ...
- linux命令管道工作原理与使用方法
一.管道定义 管道是一种两个进程间进行单向通信的机制.因为管道传递数据的单向性,管道又称为半双工管道.管道的这一特点决定了器使用的局限性.管道是Linux支持的最初Unix IPC形式之一,具有以下特 ...
- bzoj3879 SvT(后缀自动机+虚树)
bzoj3879 SvT(后缀自动机+虚树) bzoj 有一个长度为n的仅包含小写字母的字符串S,下标范围为[1,n]. 现在有若干组询问,对于每一个询问,我们给出若干个后缀(以其在S中出现的起始位置 ...
- 12.11 Exception
12.11exception 1.类别 检查性异常:用户错误或者问题引起的异常,此类异常程序员无法预见.例如:打开一个不存在的文件,用户输入错误(在只能输数字的地方输入汉字)...... 运行时异常: ...
- 12.9 Override
12.9 Override 静态方法 父类的引用可以指向子类静态方法(用static修饰的方法)的调用只和左边定义的数据类型有关,如: public class Person { public sta ...