JS(JavaScript)中如何实现,复选框checkbox多选功能

news2024/11/17 11:32:20

 起始界面:

代码元素:

  <p><input type="checkbox" id="checkedAll"> 全选按钮</p>
    <p><input type="checkbox" class="cl"> 选项1</p>
    <p><input type="checkbox" class="cl">选项2</p>
    <p><input type="checkbox" class="cl">选项3</p>
    <p><input type="checkbox" class="cl">选项4</p>

实现多选功能:

    <script>
        var checkedAll = document.getElementById('checkedAll');
        var optionList = document.querySelectorAll('.cl');
        checkedAll.onchange = function () {
            for (var i = 0; i < optionList.length; i++) {
                optionList[i].checked = checkedAll.checked;
            }
        };
        for (let i = 0; i < optionList.length; i++) {
            optionList[i].onclick = function(){
                checkedAll.checked = Array.from(optionList).every(function(item){
                    return item.checked;
                })
            }
            
        }
    </script>

 注意:

当我们通过querySelectorAll()获取的类元素是一个伪数组,因此我们需要将其转化为真正的数组

Array.from(arr):将其转为数组

arr.every(function(item){
    return item.checked;
}

 以上代码指的是,数组中任何一个元素(item),都被选中;

例子:

        var arr = [12, 48, 56, 3, 25, 60];
        // var flag = arr.every(function (item) {
        //     return item > 2;
        // })
        var flag = arr.every((item) => {
            return item > 2;
        })
        console.log(flag);

arr.every()返回的是一个boolean值,指的是每一个元素都大于2,返回true;

        var arr = [12, 48, 56, 3, 25, 60];
        // var flag = arr.some(function (item) {
        //     return item > 50;
        // })
        var flag = arr.some((item) => {
            return item > 50;
        })
        console.log(flag);

arr.every()返回的是一个boolean值,指的是只要有一个元素大于50,返回true;

        var arr = [12, 48, 56, 3, 25, 60];
        var newArr = [];
        // var newArr = arr.filter(function (item) {
        //     return item > 50;
        // })
        var newArr = arr.filter((item) => {
            return item > 30;
        })
        for (const element of newArr) {
            console.log(element+" ");
        }

arr.filter()返回的是一个数组,是一个过滤器,指的是返回数字大于30的数组元素;

        var arr = [12, 48, 56, 3, 25, 60];
        var newArr = [];
        // var newArr = arr.filter(function (item) {
        //     return item > 50;
        // })
        var newArr = arr.filter((item) => {
            return item > 30;
        })
        for (const element of newArr) {
            console.log(element+" ");
        }

运行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1479430.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

张驰咨询:为什么每个应届生都应该参加六西格玛培训?

应届生参加六西格玛培训的现象逐渐成为了一个新的趋势&#xff0c;这背后的原因不仅仅是市场对于品质管理人才的渴求&#xff0c;也源于应届生自身发展的需求。本文张驰咨询将从应届生的视角探讨参加六西格玛培训的动机&#xff0c;以及这种培训如何为他们的职业生涯铺路。 为…

认识通讯协议——TCP/IP、UDP协议的区别,HTTP通讯协议的理解

目录 引出认识通讯协议1、TCP/IP协议&#xff0c;UDP协议的区别2、HTTP通讯协议的讲解 Redis冲冲冲——缓存三兄弟&#xff1a;缓存击穿、穿透、雪崩缓存击穿缓存穿透缓存雪崩 总结 引出 认识通讯协议——TCP/IP、UDP协议的区别&#xff0c;HTTP通讯协议的理解 认识通讯协议 …

做活动和会议直播,为什么要多个媒体平台同步直播?

传媒如春雨&#xff0c;润物细无声&#xff0c;大家好&#xff0c;我是51媒体网胡老师。 多个媒体平台同步直播活动和会议的原因主要有以下几点&#xff1a; 扩大观众覆盖面&#xff1a;不同的媒体平台拥有各自独特的用户群体&#xff0c;通过在多个媒体平台同步直播&#xff…

Unity(第二十一部)动画的基础了解(感觉不了解其实也行)

1、动画组件老的是Animations 动画视频Play Automatically 是否自动播放Animate Physics 驱动方式&#xff0c;勾选后是物理驱动Culling Type 剔除方式 默认总是动画化就会一直执行下去&#xff0c;第二个是基于渲染播放&#xff08;离开镜头后不执行&#xff09;&#xff0c; …

如何解决 C/C++ 编译器优化导致的编译BUG(程序崩溃)支援VC++/CLANG/GCC

本文仅适用于&#xff0c;有愿意、爱捣鼓的童靴。 因编译器优化导致编译BUG&#xff0c;即DEBUG下面无故障稳定工作&#xff0c;但RELESE下程序会在特定函数位置上崩溃。 这要求 C/C 开发人员拥有最基本的素质&#xff0c;需要能够承受&#xff0c;逐行审视编译器输出的目标平…

yolov9,使用自定义的数据训练推理

[源码 &#x1f40b;]( GitHub - WongKinYiu/yolov9: Implementation of paper - YOLOv9: Learning What You Want to Learn Using Programmable Gradient Information) [论文 &#x1f4d8;](arxiv.org/pdf/2402.13616.pdf) 论文摘要&#xff1a;本文介绍了一种新的目标检测…

【 JS 进阶 】正则表达式

“生命是一幅抽象画&#xff0c;每一笔都是独特的经历。在色彩的交织中&#xff0c;用坚定的画笔勾勒出自己的轨迹&#xff0c;让每一幅画作都成为奋斗的印记。” - 亚历山大斯密斯 正则表达式 正则表达式&#xff08;Regular Expression&#xff09;是一种字符串匹配的模式&a…

二、TensorFlow结构分析(2)

目录 1、会话 1.1 __init__(target,graphNone,configNone) 1.2 会话的run() 1.3 feed操作 TF数据流图图与TensorBoard会话张量变量OP高级API 1、会话 1.1 __init__(target,graphNone,configNone) def session_demo():# 会话的演示# Tensorflow实现加法运算a_t tf.constan…

LNMP 架构

搭建 LNMP 架构需要安装 nginx mysql php 软件 linux nginx mysql php结合 在一台主机上搭建LNMP架构 一、编译安装 nginx 安装依赖包 yum -y install pcre-devel zlib-devel gcc gcc-c make 创建nginx程序用户 &#xff08;Nginx 服务程序默认以 nobody 身份运…

基于java Springboot实现课程评分系统设计和实现

基于java Springboot实现课程评分系统设计和实现 博主介绍&#xff1a;多年java开发经验&#xff0c;专注Java开发、定制、远程、文档编写指导等,csdn特邀作者、专注于Java技术领域 作者主页 央顺技术团队 Java毕设项目精品实战案例《1000套》 欢迎点赞 收藏 ⭐留言 文末获取源…

MySQL(基础篇)——事务

一.事务简介 事务是一组操作的集合&#xff0c;他是一个不可分割的单位&#xff0c;事务会把所有的操作作色一个整体一起向系统提交或撤销操作请求&#xff0c;即这些操作要么同时成功&#xff0c;要么同时失败。 默认MySQL的事务是自动提交的&#xff0c;也就是说&#xff0c…

QML中动态增加表格数据

1.QML中的表格实现 import QtQuick 2.15 import QtQuick.Window 2.15import QtQuick.Controls 2.0 import Qt.labs.qmlmodels 1.0 import QtQuick.Layouts 1.15Window {width: 640height: 480visible: truetitle: qsTr("Hello World")TableModel{id:table_modelTabl…

STM32 IIC协议基础概念

文章目录 前言一、IIC协议介绍二、IIC硬件框图和程序层次三、IIC协议1.IIC协议通信流程2.IIC的引脚为什么需要加入上拉电阻3.IIC的引脚为什么需要配置为开漏输出 四、STM32 IIC硬件结构总结 前言 本篇文章将带大家学习IIC通信协议的一些基础概念和使用。 一、IIC协议介绍 I2…

【iOS ARKit】RealityKit 同步机制

协作 Session 可以很方便地实现多用户之间的AR体验实时共享&#xff0c;但开发者需要自行负责并确保AR场景的完整性&#xff0c;自行负责虚拟物体的创建与销毁。为简化同步操作&#xff0c;RealityKit 内建了同步机制&#xff0c;RealityKit 同步机制基于 Multipeer Connectivi…

RISC-V特权架构 - CSR寄存器

RV32/64 特权架构 - CSR寄存器 1 CSR地址空间2 CSR定义2.1 用户级2.2 监管级2.3 超级监管级2.4 机器级 3 CSR访问3.1 CSRRW3.2 CSRRS3.3 CSRRC3.4 CSRRWI3.5 CSRRSI3.6 CSRRCI 本文属于《 RISC-V指令集基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 CSR地址空间 RISC&…

从 Flask 切到 FastAPI 后,起飞了!

我这几天上手体验 FastAPI&#xff0c;感受到这个框架易用和方便。之前也使用过 Python 中的 Django 和 Flask 作为项目的框架。Django 说实话上手也方便&#xff0c;但是学习起来有点重量级框架的感觉&#xff0c;FastAPI 带给我的直观体验还是很轻便的&#xff0c;本文就会着…

基于Python的电商评论数据采集与分析|电商API接口数据采集

引言 在电商竞争日益激烈的情况下&#xff0c;商家既要提高产品质量&#xff0c;又要洞悉客户的想法和需求&#xff0c;关注客户购买商品后的评论&#xff0c;而第三方商家获取商品评价主要依赖于人工收集&#xff0c;不但效率低&#xff0c;而且准确度得不到保障。通过使用Py…

经典DP-最大子数组

连续子数组的最大和 代码 //定义一个名为"连续子数组的最大和"的公共类 public class 连续子数组的最大和 { // 定义一个静态变量maxn&#xff0c;并赋值为100010 static int maxn100010; // 定义一个静态的整数数组dp&#xff0c;大小为maxn static int[] dp…

Java毕业设计-基于springboot开发的Web社区医院管理服务系统-毕业论文+答辩PPT(有源代码)

文章目录 前言一、毕设成果演示&#xff08;源代码在文末&#xff09;二、毕设摘要展示1.开发说明2.需求分析3、系统功能结构 三、系统实现展示1、系统功能模块2、管理员功能模块3、用户功能模块4、医生功能模块 四、毕设内容和源代码获取总结 Java毕业设计-基于springboot开发…

官网万词霸屏推广+关键词排名优化源码系统 带完整的安装代码包以及搭建教程

随着搜索引擎算法的不断更新和市场竞争的加剧&#xff0c;传统的SEO方法已经难以满足企业对于快速、高效推广的需求。罗峰结合多年的互联网营销经验和最新的搜索引擎优化技术&#xff0c;给大家推荐一款集网站搭建、关键词优化、数据分析于一体的源码系统。 以下是部分代码示例…