用 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 ...
随机推荐
- Pytorch中pad函数toch.nn.functional.pad()的用法
padding操作是给图像外围加像素点. 为了实际说明操作过程,这里我们使用一张实际的图片来做一下处理. 这张图片是大小是(256,256),使用pad来给它加上一个黑色的边框.具体代码如下: 1 2 ...
- 【SpringMVC从入门到精通】00-SpringMVC 简介
笔记来源:[尚硅谷]SpringMVC教程丨一套快速上手spring mvc 目录 SpringMVC 简介 1.课程介绍 2.什么是 MVC? 3.什么是 SpringMVC? 4.SpringMV ...
- [转载]MATLAB中神经网络的函数
1.设计函数 solvein 设计线性网络: solverb 设计径向基网络: solverbe 设计精确的径向 ...
- think php 删除
表单页面 <a href="/examtest/test/edit/id/{$v['id']}">修改</a> <a href="/exam ...
- 浅谈 SOLID 原则
单一职责原则(SRP) 单一职责原则(SRP)表明一个类有且只有一个职责.一个类就像容器一样,它能添加任意数量的属性.方法等.然而,如果你试图让一个类实现太多,很快这个类就会变得笨重.任意小的改变都将 ...
- Window7环境下安装Scrapy 方法
Window7环境下安装Scrapy Scrapy在CPython(默认Python实现)和PyPy(从PyPy 5.9开始)下运行Python 2.7和Python 3.4或更高版本. 如果您使用的 ...
- 程序设计基础·Java学习笔记·面向对象（上）
Java程序设计基础之面向对象(上) (自适应学习进度而进行记录的笔记,希望有一些小小的用处吧(^∀^●)ﾉｼ) (新人上路,望多指教,如有错误,望指正,万分感谢(oﾟvﾟ)ノ) 目录 一.面向对象 ...
- centos 在线安装 docker
镜像下载.域名解析.时间同步请点击 阿里巴巴开源镜像站 在新主机上首次安装Docker Engine之前,需要设置Docker存储库.之后,您可以从存储库安装和更新Docker. 设置存储库 安装yu ...
- 5月11日 python学习总结 子查询、pymysql模块增删改查、防止sql注入问题
一.子查询 子查询:把一个查询语句用括号括起来,当做另外一条查询语句的条件去用,称为子查询 select emp.name from emp inner join dep on emp.dep_id ...
- VS code 设置中文语言环境（实现语言切换自由）
1.打开vs code,然后按快捷键ctrl+shift+p,输入configure language>回车 2.选择Install Additional Languages... 3.在左侧选 ...