用 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 ...
随机推荐
- Flutter ChartSpace：通过跨端 Canvas 实现图表库
基于Flutter 的图形语法库,通过跨端 Canvas ,将基于 Javascript 的图形语法库 ChartSpace 扩展至 Flutter 端 作者:字节跳动终端技术--胡珀 背景 数据平台 ...
- 数字逻辑实践6-> 从数字逻辑到计算机组成 | 逻辑元件总结与注意事项
00 一些前言 数字逻辑是计算机组成与体系结构的前导课,但是在两者的衔接之间并没有那么流畅,比如对面向硬件电路的设计思路缺乏.这篇总结是在数字逻辑和计组体系结构的衔接阶段进行的. 虽然这篇文是两门课的 ...
- supervisor启动报错
supervisor 启动失败报错 Error: Another program is already listening on a port that one of our HTTP servers ...
- WPF关于绑定与更新修改
看到一些资料与教程视频,在这里记录一下, 首先 我们先做好一个公共的INotifyPropertyChanged事件,也就是通知更新 public class ViewModelBase : INot ...
- 微信网页JSDK接口-wx.chooseImage问题
wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有sourceTy ...
- 所有整数型包装类对象值的比较，使用equals方法进行比较
一.整数型包装类对象值的比较,使用equals方法进行比较 题眼:整型包装类.值的比较 注:== :对于基本类型,比较的是值:对于引用类型,比较的是地址值. // 组一Integer i1=new I ...
- 面板Panel
面板 主要步骤: 1.new一个frame窗口 格式 Frame frame = new Frame() 2.设置窗口的大小.位置.可见性 3.设置frame窗口的布局格式(分为流式布局,东西南北中, ...
- Linux内核升级修复系统漏洞-RHSA-2017:2930-Important: kernel security and bug fix update
公司使用的阿里云服务器(Centos7.4 x86_64bit)内核版本为:3.10.0-693.21.1.el7.x86_64, 2019年3月4日 02:07:58通过云盾安骑士-->漏洞管 ...
- 阿里一面，说说你了解zookeeper的应用场景有哪些？
1.前言 又到了金三银四的时候,大家都按耐不住内心的躁动,我在这里给大家分享下之前面试中遇到的一个知识点(zookeeper应用场景),希望对大家有些帮助.如有不足,欢迎大佬们指点指点. 2.zook ...
- bzoj2007/luoguP2046 海拔(平面图最小割转对偶图最短路)
bzoj2007/luoguP2046 海拔(平面图最小割转对偶图最短路) 题目描述: bzoj luogu 题解时间: 首先考虑海拔待定点的$h$都应该是多少 很明显它们都是$0$或$1$,并且所 ...