JavaScript实现全选、反选功能(Vue全选、反选,js原生全选、反选)

news/2024/6/23 16:51:29/文章来源:https://blog.csdn.net/weixin_65793170/article/details/137240091

简介:

  • 在JavaScript中,实现全选和反选通常是通过操作DOM元素和事件监听来实现;

  • 全选功能:当用户点击一个“全选”复选框时,页面中所有具有相同类名的复选框都将被选中;

  • 反选功能:用户点击一个“反选”复选框时,已选中的将变为未选中,未选中的将变为选中。

这里分别用原生JS和Vuejs实现一下

一、JavaScript实现

1、先看效果

2、html部分

<div class="test_checks"><h2>JavaScript原生全选、反选功能</h2><input type="checkbox" id="selectAll" /> Select All<br /><br /><input type="checkbox" class="checkbox" /> Item 1<br /><input type="checkbox" class="checkbox" /> Item 2<br /><input type="checkbox" class="checkbox" /> Item 3<br />
</div>

3、这里首先为selectAll复选框添加了一个change事件监听器,当用户点击该复选框时,将触发该事件;然后在事件处理函数中,通过遍历所有复选框,将它们的选中状态设置为与selectAll复选框相同的状态

document.getElementById("selectAll").addEventListener("change", function () {var checkboxes = document.getElementsByClassName("checkbox");for (var i = 0; i < checkboxes.length; i++) {checkboxes[i].checked = this.checked;}
});

4、这里在事件处理函数中,为每个复选框添加了一个change事件监听器。当用户点击某个复选框时,触发该事件。在事件处理函数中,首先设置allChecked变量为true,然后遍历所有复选框,如果发现有复选框没有被选中,将allChecked变量设置为false并跳出循环。最后,将selectAll复选框的选中状态设置为allChecked

    var checkboxes = document.getElementsByClassName("checkbox");for (var i = 0; i < checkboxes.length; i++) {checkboxes[i].addEventListener("change", function () {var allChecked = true;for (var j = 0; j < checkboxes.length; j++) {if (!checkboxes[j].checked) {allChecked = false;break;}}document.getElementById("selectAll").checked = allChecked;});}

5、完整代码

  <div class="test_checks"><h2>JavaScript原生全选、反选功能</h2><input type="checkbox" id="selectAll" /> Select All<br /><br /><input type="checkbox" class="checkbox" /> Item 1<br /><input type="checkbox" class="checkbox" /> Item 2<br /><input type="checkbox" class="checkbox" /> Item 3<br /></div><script>document.getElementById("selectAll").addEventListener("change", function () {var checkboxes = document.getElementsByClassName("checkbox");for (var i = 0; i < checkboxes.length; i++) {checkboxes[i].checked = this.checked;}});var checkboxes = document.getElementsByClassName("checkbox");for (var i = 0; i < checkboxes.length; i++) {checkboxes[i].addEventListener("change", function () {var allChecked = true;for (var j = 0; j < checkboxes.length; j++) {if (!checkboxes[j].checked) {allChecked = false;break;}}document.getElementById("selectAll").checked = allChecked;});}</script>

二、Vue.Js实现

1、先看效果

2、html部分

<div><!-- 全选按钮 --><inputtype="checkbox"v-model="checkAllFlag"@change="choseCheckAll"/><!-- 可选项目列表 --><ul><li v-for="(item, index) in items" :key="index"><inputtype="checkbox"v-model="checkedS":value="item.id"@change="ChoseChecks"/>{{ item.name }}</li></ul>
</div>

这里为全选按钮绑定一个v-model的checkAllFlag状态,用于存储全选状态;然后为每个可选项目绑定一个v-model的 checkedS属性,它是一个数组,用于存储被选中的项目的ID。

3、然后定义相关的数据类型

data() {return {checkAllFlag: false,checkedS: [],items: [{ id: 1, name: "Item 1" },{ id: 2, name: "Item 2" },{ id: 3, name: "Item 3" },{ id: 4, name: "Item 4" },],};
},

4、函数部分

  methods: {choseCheckAll() {this.checkedS = this.checkAllFlag? this.items.map((item) => item.id): [];},ChoseChecks(value) {if (this.checkAllFlag && value) {this.checkAllFlag = false;} else if (!this.checkAllFlag &&this.checkedS.length === this.items.length &&value) {this.checkAllFlag = true;}},},

这里为全选按钮的@change事件choseCheckAll,该方法根据全选状态更新所有项目的选中状态。
每个可选项目的@change事件触发一个方法(如 ChoseChecks),用于更新全选状态,当所有项目都被选中或取消选中时,全选按钮的状态应相应改变。


5、注意事项

choseCheckAll 方法:

  1. 当全选按钮被选中时,将所有项目的ID(this.items.map(item => item.id))赋值给 checkedS,实现全选。
  2. 当全选按钮被取消选中时,将 checkedS 设置为空数组,取消所有项目的选中状态。

ChoseChecks 方法:

  1. 当全选按钮已选中且某个项目被取消选中时,将 checkAllFlag 设置为 false,表示不再全选。
  2. 当全选按钮未选中,且当前选中的项目数量等于总项目数减一,且有新的项目被选中时,将 checkAllFlag 设置为 true,表示所有项目已被选中。这里的条件判断是为了避免在勾选最后一个未选中项时触发两次ChoseChecks,导致checkAllFlag被错误地重置。

6、完整代码

  <div class="test_checks"><inputtype="checkbox"v-model="checkAllFlag"@change="choseCheckAll"/><span class="checkll_dom">全选</span><ul><li v-for="(item, index) in items" :key="index"><inputtype="checkbox"v-model="checkedS":value="item.id"@change="ChoseChecks"/>{{ item.name }}</li></ul></div>data() {return {checkAllFlag: false,checkedS: [],items: [{ id: 1, name: "Item 1" },{ id: 2, name: "Item 2" },{ id: 3, name: "Item 3" },{ id: 4, name: "Item 4" },],};},methods: {choseCheckAll() {this.checkedS = this.checkAllFlag? this.items.map((item) => item.id): [];},ChoseChecks(value) {if (this.checkAllFlag && value) {this.checkAllFlag = false;} else if (!this.checkAllFlag &&this.checkedS.length === this.items.length &&value) {this.checkAllFlag = true;}},},

创作不易,感觉有用,就一键三连,感谢(●'◡'●)

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

正则表达式(1)

文章目录 专栏导读1、match2、匹配目标3、通用匹配4、常用匹配规则表格 专栏导读 ✍ 作者简介&#xff1a;i阿极&#xff0c;CSDN 数据分析领域优质创作者&#xff0c;专注于分享python数据分析领域知识。 ✍ 本文录入于《python网络爬虫实战教学》&#xff0c;本专栏针对大学生…

GPT4不限制使用次数了!GPT5即将推出了!

今天登录到ChatGPT Plus账户&#xff0c;出现了如下提示&#xff1a; 已经没有了数量和时间限制的提示。 更改前&#xff1a;每 3 小时限制 40 次&#xff08;团队计划为 100 次&#xff09;&#xff1b;更改后&#xff1a;可能会应用使用限制。 GPT-4放开限制 身边订阅了Ch…

kanzi运行时节点状态展示

背景&#xff1a;有时候kanzi运行后节点不显示&#xff0c;可能是visible/opacity等属性设置不正确&#xff0c;排查困难。做一个实时节点树&#xff0c;方便查看节点信息。 1. 引入imgui 在vs工程里导入glad,glfw,imgui代码 vs属性-链接库&#xff0c;增加glfw3.lib 2. 实现…

js手持小风扇

文章目录 1. 演示效果2. 分析思路3. 代码实现 1. 演示效果 2. 分析思路 先编写动画&#xff0c;让风扇先转起来。使用 js 控制动画的持续时间。监听按钮的点击事件&#xff0c;在事件中修改元素的animation-duration属性。 3. 代码实现 <!DOCTYPE html> <html lang…

Redis 主从复制集群搭建及其原理

目录 前言 配置文件 启动服务 配置主从关系 两种配置方式 slaveof 配置文件 补充 缺点 认证 复制原理 全量同步 增量同步 前言 单机的 redis 的性能虽然已经很强大了&#xff0c;但是随着业务的扩展&#xff0c;总有一天会遇到性能瓶颈&#xff0c;针对高并发带来…

java数组与集合框架(一) -- 数据结构,数组

数据结构 概述 为什么要讲数据结构&#xff1f; 任何一个有志于从事IT领域的人员来说&#xff0c;数据结构&#xff08;Data Structure&#xff09;是一门和计算机硬件与软件都密切相关的学科&#xff0c;它的研究重点是在计算机的程序设计领域中探讨如何在计算机中组织和存储…

ClickHouse初体验

1.clickHouse是啥&#xff1f; ClickHouse 是俄罗斯的 Yandex 于 2016 年开源的列式存储数据库(DBMS)&#xff0c;使用 C语言编写&#xff0c;主要用于在线分析处理查询(OLAP)&#xff0c;能够使用SQL查询实时生成分析数据报告 2.clickHouse的特点 2.1列式存储 对于列的聚合&…

使用vite创建一个react18项目

一、vite是什么&#xff1f; vite 是一种新型前端构建工具&#xff0c;能够显著提升前端开发体验。它主要由两部分组成&#xff1a; 一个开发服务器&#xff0c;它基于原生 ES 模块提供了丰富的内建功能&#xff0c;如速度快到惊人的模块热更新&#xff08;HMR&#xff09;。 …

基于Scala开发Spark ML的ALS推荐模型实战

推荐系统&#xff0c;广泛应用到电商&#xff0c;营销行业。本文通过Scala&#xff0c;开发Spark ML的ALS算法训练推荐模型&#xff0c;用于电影评分预测推荐。 算法简介 ALS算法是Spark ML中实现协同过滤的矩阵分解方法。 ALS&#xff0c;即交替最小二乘法&#xff08;Alte…

VUE——生命周期

概念&#xff1a; mounted:挂载 new Vue({el: "#x",data: {},methods: {},mounted() {}, }) 系统会自己调用&#xff0c;不需要我们调用。 案例 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><…

走进《与凤行》感受维达棉韧联名魅力

随着《与凤行》的热播&#xff0c;维达也陆续推出了各个纸抽系列的联名&#xff0c;棉韧联名就是这样一款结合了维达品牌优质棉韧面巾纸和《与凤行》IP元素的产品。这款软抽不仅在质地上保持了维达棉韧系列的柔软舒适&#xff0c;还融入了《与凤行》的设计元素&#xff0c;为用…

【威胁情报综述阅读3】Cyber Threat Intelligence Mining for Proactive Cybersecurity Defense

【威胁情报综述阅读1】Cyber Threat Intelligence Mining for Proactive Cybersecurity Defense: A Survey and New Perspectives 写在最前面一、介绍二、网络威胁情报挖掘方法和分类A. 研究方法1&#xff09; 第 1 步 - 网络场景分析&#xff1a;2&#xff09; 第 2 步 - 数据…

如何优化Flutter应用以通过iOS应用商店的审核流程

本文探讨了使用Flutter开发的iOS应用能否上架&#xff0c;以及上架的具体流程。苹果提供了App Store作为正式上架渠道&#xff0c;同时也有TestFlight供开发者进行内测。合规并通过审核后&#xff0c;Flutter应用可以顺利上架。但上架过程可能存在一些挑战&#xff0c;因此可能…

百度语音识别

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 一、建号—获取试用KEY二、测试代码三、运行四、运行结果五、验证五、总结 一、建号—获取试用KEY https://console.bce.baidu.com/ai/#/ai/speech/overview/index…

第117讲:深入MySQL性能优化:从多个角度提升数据库性能

文章目录 1.从哪些角度去考虑MySQL的优化2.数据库服务器的选型3.从操作系统层面去优化MySQL数据库3.1.关于CPU方面的优化3.2.关于内存方面的优化3.3.关于磁盘IO方面 4.应用端的优化5.数据库系统优化工具6.数据库系统参数优化6.1.最大连接数的优化&#xff08;max_connections&a…

【蓝桥杯选拔赛真题54】C++分糖果游戏 第十四届蓝桥杯青少年创意编程大赛 算法思维 C++编程选拔赛真题解

目录 C分糖果游戏 一、题目要求 1、编程实现 2、输入输出 二、算法分析 三、程序编写 四、程序说明 五、运行结果 六、考点分析 七、推荐资料 C分糖果游戏 第十四届蓝桥杯青少年创意编程大赛C选拔赛真题 一、题目要求 1、编程实现 现有N罐糖果&#xff0c;且已知…

数据库加载驱动问题(java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver)

java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver 遇到此问题&#xff0c;首先检查IDEA外部库中是否有mysql数据库驱动。如下所示&#xff1a; 如果发现外部库中存有mysql数据库驱动&#xff0c;需要在数据库配置文件中查看是否设置有时区mysql8.0以上版本需要设…

鸿蒙TypeScript入门学习第6天:【条件语句】

1、TypeScript 条件语句 条件语句用于基于不同的条件来执行不同的动作。 TypeScript 条件语句是通过一条或多条语句的执行结果&#xff08;True 或 False&#xff09;来决定执行的代码块。 可以通过下图来简单了解条件语句的执行过程: 2、条件语句 通常在写代码时&#xff0…

CQI-17:2021 V2 英文 、中文版。特殊过程:电子组装制造-锡焊系统评审标准

锡焊作为一个特殊的工艺过程&#xff0c;由于其材料特性的差异性、工艺参数的复杂性和过程控制的不确定性&#xff0c;长期以来一直视为汽车零部件制造业的薄弱环节&#xff0c;并将很大程度上直接导致整车产品质量的下降和召回风险的上升。 美国汽车工业行动集团AIAG的特别工…

AWS创建IAM用户,以及通过IAM用户登录

基本概念&#xff1a; IAM Identity Center&#xff08;AWS SSO&#xff09; 跨账户访问&#xff1a;IAM Identity Center允许用户使用他们自己的单一登录凭证来访问多个AWS账户和应用程序。这意味着你可以拥有一个账户和密码&#xff0c;通过IAM Identity Center的用户门户&…