用 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 ...
随机推荐
- 零基础，三个月内，找到??? java后端开发工作
一.分析你的问题 出于尊重,先分析一下你的原问题吧,从您的问题,我提取到关键信息:"零基础"."三个月内"."找到工作",最后一个关键词&q ...
- 云e办笔记（删减）
1JwtTokenUtils工具 2公共返回对象 3Admin实现UserDetails 4AdminLoginParam 5AdminLoginController 6SecurityConfig ...
- ArcGIS温泉数据聚类分析、核密度分析
这期博主给大家介绍下ArcGIS中的Riple's K 函数.与Kernel核密度分析. 首先从百度获取了湖南省的温泉数据.如图: 湖南省温泉数据 1.数据处理 (1)复制粘贴x.y坐标. (2)用快 ...
- Java基础——抽象类
一.概述: 在Java中,一个没有方法体的方法应定义为抽象方法在public 修饰符后加 abstract修饰符,而类中如果有抽象方法,该类必须定义为抽象类在public 修饰符后加 abstract ...
- windows安装oos遇到的坑 （汇总）
一.环境安装 -- 搭建域控服务器 1. 打开服务器管理器,添加角色和功能: 2.下一步: 3.下一步: 4.下一步 5.选择添加AD域服务,同时添加所需功能,下一步: 6.安装功能,下一步: 7. ...
- python psutila模块
#!/usr/bin/env python #coding:utf-8 # qianxiao996精心制作 #博客地址:https://blog.csdn.net/qq_36374896 import ...
- USB接口定义 | USB Type C接口定义 | 制作Type A转Type C充电-数据线
1. USB接口定义 2. USB Type C接口定义 Type C接口母头(插座) Type C接口公头(插头) 引脚定义 参考:https://www.cnblogs.com/zhouhaoch ...
- 关于如何让写自然溢出hash的无辜孩子见祖宗这件事
关于如何让写自然溢出hash的无辜孩子见祖宗这件事 来源博客 这几天考试连着好几次被卡hash卡到死. 我谔谔,为什么连hash都要卡. 码力弱鸡什么时候才能站起来. 只需要任意两种字符,比如噫呜呜噫 ...
- [NPUCTF2020]Baby Obfuscation wp
整体观察main函数,可以发现用户自定义函数和变量存在混淆,猜测为函数名及变量名asc混淆. 对函数进行分析: Fox1为欧几里得算法求最大公约数 Fox5其实是pow Fox4根据逻辑数学的法则实际 ...
- hanoi(老汉诺塔问题新思维)
#include <stdio.h> //第一个塔为初始塔,中间的塔为借用塔,最后一个塔为目标塔 int i=1;//记录步数 void move(int n, char from,cha ...