JS-DOM编程-05-复选框的全选与取消全选

2024-04-23 22:58

本文主要是介绍JS-DOM编程-05-复选框的全选与取消全选,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

JS-DOM编程-05-复选框的全选与取消全选

1.当点击全选框时,选中所有复选框

复选框对象的checked属性代表复选框是否被选中:

  • 如果值为true,则表示复选框被选中
  • 如果值为false,则表示复选框未被选中

我们可以利用checked属性来实现功能。

在全选框中设置一个click事件,当点击全选框时,遍历所有复选框对象,

将全选框的checked属性值赋给所有复选框的checked属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复选框的全选与取消全选</title>
</head>
<body><script type="text/javascript">window.onload = function() {//获取所有复选框对象,返回一个数组var hobbys = document.getElementsByName("hobby");//获取全选框对象var chooseAllElt = document.getElementById("chooseAll");//当点击全选框时,将全选框的checked值赋给所有复选框对象的checkedchooseAllElt.onclick = function() {//遍历所有复选框对象for (var i = 0;i < hobbys.length;i++) {hobbys[i].checked = chooseAllElt.checked;}}}</script><input type="checkbox" id="chooseAll">全选<br><input type="checkbox" name="hobby" value="smoke">抽烟<br><input type="checkbox" name="hobby" value="drink">喝酒<br><input type="checkbox" name="hobby" value="firehair">烫头<br>
</body>
</html>

2.当所有复选框都被选中时,将全选框选中

当所有复选框都被选中时,将全选框选中的条件是:

复选框总数量=被选中的复选框数量

当点击任意一个复选框时,将所有的复选框都检查一遍,统计出被选中的复选框数量,然后与复选框总数量相比较。将比较结果赋给全选框的checked属性。

由于要实现点击任意一个复选框时,都触发检查函数,所以要先遍历一遍复选框数组,将检查函数注册到每一个复选框的click事件中。

然后在检查函数中,定义一个变量,存储被选中的复选框数量,通过遍历复选框数组,统计被选中的复选框数量,然后将被选中的复选框数量与总复选框数量相比较,将比较结果赋给全选框的checked属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复选框的全选与取消全选</title>
</head>
<body><script type="text/javascript">window.onload = function() {//获取所有复选框对象var hobbys = document.getElementsByName("hobby");//获取全选框对象var chooseAllElt = document.getElementById("chooseAll");//当点击全选框时,将所有复选框对象的checked与全选框的checked设为一致chooseAllElt.onclick = function() {for (var i = 0;i < hobbys.length;i++) {hobbys[i].checked = chooseAllElt.checked;}}//当点击任意一个复选框时,将所有复选框都检查一遍,如果所有复选框都被选上了,那么将全选框打上对钩//定义复选框的总数量var allCounts = hobbys.length;//第一次for循环是在页面加载完毕时执行,目的是将下面的函数注册到每一个复选框的click事件里for(var i = 0;i < hobbys.length;i++) {hobbys[i].onclick = function() {//定义已经被选上的复选框个数var selectedCounts = 0;//第二次for循环是在点击任意一个复选框时执行,目的是统计所有被选中的复选框数量for(var j = 0;j < hobbys.length;j++) {if(hobbys[j].checked) {selectedCounts++;}}//将复选框的总数量和所有已被选中的复选框数量的比较值赋给全选框的checked属性chooseAllElt.checked = (allCounts == selectedCounts);}}}</script><input type="checkbox" id="chooseAll">全选<br><input type="checkbox" name="hobby" value="smoke">抽烟<br><input type="checkbox" name="hobby" value="drink">喝酒<br><input type="checkbox" name="hobby" value="firehair">烫头<br>
</body>
</html>

这篇关于JS-DOM编程-05-复选框的全选与取消全选的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/930124

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码: 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口,https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor

【Python编程】Linux创建虚拟环境并配置与notebook相连接

1.创建 使用 venv 创建虚拟环境。例如,在当前目录下创建一个名为 myenv 的虚拟环境: python3 -m venv myenv 2.激活 激活虚拟环境使其成为当前终端会话的活动环境。运行: source myenv/bin/activate 3.与notebook连接 在虚拟环境中,使用 pip 安装 Jupyter 和 ipykernel: pip instal

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

【编程底层思考】垃圾收集机制,GC算法,垃圾收集器类型概述

Java的垃圾收集(Garbage Collection,GC)机制是Java语言的一大特色,它负责自动管理内存的回收,释放不再使用的对象所占用的内存。以下是对Java垃圾收集机制的详细介绍: 一、垃圾收集机制概述: 对象存活判断:垃圾收集器定期检查堆内存中的对象,判断哪些对象是“垃圾”,即不再被任何引用链直接或间接引用的对象。内存回收:将判断为垃圾的对象占用的内存进行回收,以便重新使用。

Go Playground 在线编程环境

For all examples in this and the next chapter, we will use Go Playground. Go Playground represents a web service that can run programs written in Go. It can be opened in a web browser using the follow

深入理解RxJava:响应式编程的现代方式

在当今的软件开发世界中,异步编程和事件驱动的架构变得越来越重要。RxJava,作为响应式编程(Reactive Programming)的一个流行库,为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava?💯 响应式编程的优势💯 RxJava的核心概念

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

函数式编程思想

我们经常会用到各种各样的编程思想,例如面向过程、面向对象。不过笔者在该博客简单介绍一下函数式编程思想. 如果对函数式编程思想进行概括,就是f(x) = na(x) , y=uf(x)…至于其他的编程思想,可能是y=a(x)+b(x)+c(x)…,也有可能是y=f(x)=f(x)/a + f(x)/b+f(x)/c… 面向过程的指令式编程 面向过程,简单理解就是y=a(x)+b(x)+c(x)