当前位置: 首页 > news >正文

vue中获取复选框是否被选中的值、如何用JavaScript判断复选框是否被选中

一、方法介绍 

        第一种方法:通过获取dom元素,getElementById、querySelector、getElementsByName、querySelectorAll(需要遍历,例如:for循环)

        第二种是用v-model在input复选框上绑定一个变量,通过双向绑定的特性来判断复选框是否被选中。(推荐使用)

二、演示:

第一种:被选中输出true,否则为false

document.getElementById()

html:

<input type="checkbox" id="myCheckbox">

js:

let checkbox = document.getElementById("myCheckbox");
console.log(checkbox.checked); // 输出 true 或 false

document.querySelector() 

html:

<input type="checkbox" class="myCheckbox">

js:

let checkbox = document.querySelector('.myCheckbox');
console.log(checkbox.checked); // 输出 true 或 false

document.getElementsByName() 可以获取多个,多个用for循环

html: 

<input type="checkbox" name="myCheckbox">
<input type="checkbox" name="myCheckbox">

js:

let checkboxes = document.getElementsByName("myCheckbox");
for (let i = 0; i < checkboxes.length; i++) {console.log(checkboxes[i].checked); // 输出 true 或 false
}

querySelectorAll()

html:

<input type="checkbox">
<input type="checkbox">

js: 

let checkboxes = document.querySelectorAll('input[type="checkbox"]');
for (let i = 0; i < checkboxes.length; i++) {console.log(checkboxes[i].checked); // 输出 true 或 false
}

第二种:

html:

<input type="checkbox" class="apply-checkbox" v-model="checkboxIsChecked">

 js:在data中声明变量checkboxIsChecked:false 未选中

data(){return{checkboxIsChecked:false,}
}

在你做任何其他操作的时候判断checkboxIsChecked的值,如果为true表明选中了,再进行后续操作。比如:点击事件checkClick()中输出checkboxIsChecked的值

    checkClick(){console.log(this.checkboxIsChecked);}

选中输出true、未选中输出false。

checkboxIsChecked的值会随着复选框的选中与否实时改变。

相关文章:

vue中获取复选框是否被选中的值、如何用JavaScript判断复选框是否被选中

一、方法介绍 第一种方法&#xff1a;通过获取dom元素&#xff0c;getElementById、querySelector、getElementsByName、querySelectorAll&#xff08;需要遍历&#xff0c;例如&#xff1a;for循环&#xff09; 第二种是用v-model在input复选框上绑定一个变量&#xff0c;通过…...

Python学习之逻辑中的循环有哪些?

1. for循环 for 循环用于迭代 (遍历)一个序列&#xff0c;例如列表、元组、字符串或字典中的元素。 通常使用 for 循环来遍历可迭代对象中的元素&#xff0c;并对每个元素执行相同的操作。 示例: for item in iterable: # 执行操作2.while循环 -while循环用于在满足某个条件…...

【uniapp微信小程序+springBoot(binarywang)

uniapp前端代码 <template><view><page-head :title"title"></page-head><view class"uni-padding-wrap"><view style"background:#FFF; padding:50rpx 0;"><view class"uni-hello-text uni-cente…...

智能井盖的用处有哪些?好用在什么地方?

智能井盖是一种基于物联网技术的井盖系统&#xff0c;通过集成传感器、通信设备和数据处理功能&#xff0c;实现对井盖的实时监测、远程管理和智能化控制。WITBEE万宾的智能井盖传感器EN100-C2&#xff0c;只要在城市需要的井盖上面安装即可使用&#xff0c;一体式结构&#xf…...

微信小程序数据存储方式有哪些

在微信小程序中&#xff0c;数据存储方式有以下几种&#xff1a; 本地存储 本地存储是一种轻量级的数据存储方式&#xff0c;用于存储小量的数据&#xff0c;例如用户的配置信息、页面的状态等。微信小程序提供了 wx.setStorage() 和 wx.getStorage() 方法&#xff0c;用于将数…...

FTC局部路径规划代码分析

前置知识: costmap_2d::Costmap2DROS costmap; costmap_2d::Costmap2DROS 是一个ROS包中提供的用于处理2D成本地图的类。它是一个高级的接口&#xff0c;通常用于与ROS导航栈中的导航规划器和本地路径跟踪器等模块进行集成。 costmap 是一个指向 Costmap2DROS 对象的指针。通…...

SpringBoot集成Activiti7

SpringBoot集成Activiti7 SpringBoot版本使用2.7.16 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.7.16</version><relativePath/> <!-- lookup…...

25.1 MySQL SELECT语句

1. SQL概述 1.1 SQL背景知识 1946年, 世界上诞生了第一台电脑, 而今借由这台电脑的发展, 互联网已经成为一个独立的世界. 在过去几十年里, 许多技术和产业在互联网的舞台上兴衰交替. 然而, 有一门技术却从未消失, 甚至日益强大, 那就是SQL.SQL(Structured Query Language&…...

【VSCode】Windows环境下,VSCode 搭建 cmake 编译环境(通过配置文件配置)

除了之前的使用 VSCode 插件来编译工程外&#xff0c;我们也可以使用配置文件来编译cmake工程&#xff0c;主要依赖 launch.json 和 tasks.json 文件。 目录 一、下载编译器 1、下载 Windows GCC 2、选择编译器路径 二、配置 debug 环境 1、配置 lauch.json 文件 2、配置…...

useragent识别访问设备

背景需求 ruoyi框架&#xff0c;前后端分离。现在要在用户访问的时候根据不同的设备跳转到不同的登录页面。 教程 router/index.js 修改src/router/index.js&#xff0c;在这里增加自己的要跳转的页面 permission.js 在白名单中添加自己的登录页面 增加以下识别的代码 le…...

紫光同创FPGA实现UDP协议栈网络视频传输,带录像和抓拍功能,基于YT8511和RTL8211,提供2套PDS工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐我这里已有的以太网方案紫光同创FPGA精简版UDP方案紫光同创FPGA带ping功能UDP方案紫光同创FPGA精简版UDP视频传输方案 3、设计思路框架OV5640摄像头配置及采集数据缓冲FIFOUDP协议栈详解MAC层发送MAC发送模式MAC层接收ARP发送ARP接收ARP缓…...

【机器学习】逻辑回归

文章目录 逻辑回归定义损失函数正则化 sklearn里面的逻辑回归多项式逻辑回归 逻辑回归 逻辑回归&#xff0c;是一种名为“回归”的线性分类器&#xff0c;其本质是由线性回归变化而来的&#xff0c;一种广泛使用于分类问题中的广义回归算法。 线性回归是机器学习中最简单的的…...

DITA-OT 4.0新特性 - PDF themes,定制PDF样式的新方法

随着DITA-OT 4.0的发布&#xff0c;它提供了一种新的定制PDF样式方法&#xff0c;这种方法就是PDF theme。这篇文章来聊一聊这种定制PDF输出的新方法和实验结果。 在进入PDF theme细节之前&#xff0c;为各位读者梳理一下DITA-OT将DITA和Markdown发布成PDF的几种方法。 - 1 …...

MySQL 8.0 OCP认证精讲视频、环境和题库之四 多实例启动 缓存、事务、脏读

一、配置第一个mysqld服务 1、编辑选项文件&#xff0c;指定以下选项&#xff1a; [mysqld] basedir/mysql80 datadir/mysql80/data1 socket/mysql80/data1/mysqld.sock pid-file/mysql80/data1/mysqld.pid log-error/mysql80/dat…...

对代码感兴趣 但不擅长数学怎么办——《机器学习图解》来救你

目前&#xff0c;该领域中将理论与实践相结合、通俗易懂的著作较少。机器学习是人工智能的一部分&#xff0c;很多初学者往往把机器学习和深度学习作为人工智能入门的突破口&#xff0c;非科班出身的人士更是如此。当前&#xff0c;国内纵向复合型人才和横向复合型人才奇缺;具有…...

【EI会议征稿】第三届大数据、信息与计算机网络国际学术会议(BDICN 2024)

第三届大数据、信息与计算机网络国际学术会议&#xff08;BDICN 2024&#xff09; 2024 3rd International Conference on Big Data, Information and Computer Network 第三届大数据、信息与计算机网络国际学术会议&#xff08;BDICN 2024&#xff09;定于2024年1月12-14日在…...

【Arduino+ESP32+腾讯云+sg90】强制门户+腾讯云控制开关灯

作者有话说 博主对于Arduino开发并没有基础&#xff0c;但是为了实现更加方便的配网&#xff0c;这几天一直在尝试用ESP32-12F&#xff08;因为手头刚好有一个&#xff0c;其他的也可以&#xff09;来做远程开关灯&#xff01;不知道大家是否注意到&#xff0c;上一篇利用STM32…...

windows中elasticsearch7中添加用户名密码验证

1.找到elsatic的bin目录输入cmd 2.生成ca证书 输入 elasticsearch-certutil ca 在es7根目录生成ca证书&#xff0c;输入密码时直接回车即可&#xff0c;否则后面会报错 Please enter the desired output file [elastic-stack-ca.p12]: #这里直接回车即可 Enter password for…...

linux安装达梦数据库(命令行安装)

安装达梦数据库 创建安装用户 1,创建安装用户组dinstall [rootdmDMServer1 ~]# groupadd -g 12345 dinstallgroupadd : 创建组 -g : 指定组id&#xff08;GID&#xff09; 12345&#xff1a; 指定的组名称 dinstall &#xff1a; 组名 2,创建安装用户dmdba [rootdmDMSe…...

Flutter——最详细(CustomScrollView)使用教程

CustomScrollView简介 创建一个 [ScrollView]&#xff0c;该视图使用薄片创建自定义滚动效果。 [SliverList]&#xff0c;这是一个显示线性子项列表的银子列表。 [SliverFixedExtentList]&#xff0c;这是一种更高效的薄片&#xff0c;它显示沿滚动轴具有相同范围的子级的线性列…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

多模态2025:技术路线“神仙打架”,视频生成冲上云霄

文&#xff5c;魏琳华 编&#xff5c;王一粟 一场大会&#xff0c;聚集了中国多模态大模型的“半壁江山”。 智源大会2025为期两天的论坛中&#xff0c;汇集了学界、创业公司和大厂等三方的热门选手&#xff0c;关于多模态的集中讨论达到了前所未有的热度。其中&#xff0c;…...

Golang 面试经典题:map 的 key 可以是什么类型?哪些不可以?

Golang 面试经典题&#xff1a;map 的 key 可以是什么类型&#xff1f;哪些不可以&#xff1f; 在 Golang 的面试中&#xff0c;map 类型的使用是一个常见的考点&#xff0c;其中对 key 类型的合法性 是一道常被提及的基础却很容易被忽视的问题。本文将带你深入理解 Golang 中…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

Caliper 配置文件解析:config.yaml

Caliper 是一个区块链性能基准测试工具,用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构,并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件,主要包含以下几个部…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

R 语言科研绘图第 55 期 --- 网络图-聚类

在发表科研论文的过程中&#xff0c;科研绘图是必不可少的&#xff0c;一张好看的图形会是文章很大的加分项。 为了便于使用&#xff0c;本系列文章介绍的所有绘图都已收录到了 sciRplot 项目中&#xff0c;获取方式&#xff1a; R 语言科研绘图模板 --- sciRplothttps://mp.…...

C语言中提供的第三方库之哈希表实现

一. 简介 前面一篇文章简单学习了C语言中第三方库&#xff08;uthash库&#xff09;提供对哈希表的操作&#xff0c;文章如下&#xff1a; C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...

在golang中如何将已安装的依赖降级处理,比如:将 go-ansible/v2@v2.2.0 更换为 go-ansible/@v1.1.7

在 Go 项目中降级 go-ansible 从 v2.2.0 到 v1.1.7 具体步骤&#xff1a; 第一步&#xff1a; 修改 go.mod 文件 // 原 v2 版本声明 require github.com/apenella/go-ansible/v2 v2.2.0 替换为&#xff1a; // 改为 v…...