使用on change获取选中复选框的值
使用onchange事件可以获取选中复选框的值。当复选框的选中状态发生改变时，触发onchange事件，可以通过该事件的处理函数来获取选中复选框的值。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>获取选中复选框的值</title>
</head>
<body>
<input type="checkbox" id="checkbox1" value="value1" onchange="getCheckboxValue()">
<label for="checkbox1">选项1</label><br>
<input type="checkbox" id="checkbox2" value="value2" onchange="getCheckboxValue()">
<label for="checkbox2">选项2</label><br>
<input type="checkbox" id="checkbox3" value="value3" onchange="getCheckboxValue()">
<label for="checkbox3">选项3</label><br>
<script>
function getCheckboxValue() {
var checkboxes = document.querySelectorAll('input[type="checkbox"]:checked');
var values = [];
for (var i = 0; i < checkboxes.length; i++) {
values.push(checkboxes[i].value);
}
console.log(values);
}
</script>
</body>
</html>在上述代码中，我们给每个复选框添加了onchange事件，并指定了一个名为getCheckboxValue的处理函数。当复选框的选中状态发生改变时，该函数会被调用。
在getCheckboxValue函数中，我们使用querySelectorAll方法获取所有被选中的复选框元素，并将它们的值存储在一个数组中。最后，我们通过console.log打印出这些值。
这样，当用户选中或取消选中复选框时，就可以通过onchange事件获取选中复选框的值。
推荐的腾讯云相关产品：腾讯云云服务器（CVM），腾讯云对象存储（COS）
- 腾讯云云服务器（CVM）：腾讯云提供的弹性计算服务，可快速部署云服务器实例，满足各种计算需求。详情请参考：腾讯云云服务器（CVM）
- 腾讯云对象存储（COS）：腾讯云提供的海量、安全、低成本的云端存储服务，适用于各种场景，如网站托管、备份存储、大数据分析等。详情请参考：腾讯云对象存储（COS）
相关·内容
15分57秒
32-尚硅谷-尚优选PC端项目-选择搭配中复选框选中状态的套餐价联动效果
350
6分43秒
Java零基础-367-通过反射获取注解对象属性的值
20
9分54秒
024-尚硅谷-jdbc-insert操作之后获取自增列的值
380
5分48秒
17.尚硅谷_MyBatis_映射文件_insert_获取自增主键的值.avi
3700
22分53秒
Java教程 Mybatis 15-插入数据后获取自增的id值 学习猿地
4111
12分7秒
19.尚硅谷_MyBatis_映射文件_insert_获取非自增主键的值_selectKey.avi
3340
7分0秒
06-尚硅谷-支付宝支付-使用沙箱-沙箱参数的获取
400
5分15秒
53-尚硅谷-JDBC核心技术-使用QueryRunner查询表中特殊值的操作
430
5分15秒
53-尚硅谷-JDBC核心技术-使用QueryRunner查询表中特殊值的操作
350
16分45秒
131-通过控制器方法的形参获取请求参数和@RequestParam的使用
360
15分49秒
day06_Eclipse的使用与数组/11-尚硅谷-Java语言基础-数组元素的默认初始化值
350
15分49秒
day06_Eclipse的使用与数组/11-尚硅谷-Java语言基础-数组元素的默认初始化值
300
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
