jQuery是一个快速、简洁的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，在本文中，我们将介绍如何使用jQuery获取复选框选中的值。
jQuery简介
jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互等操作，jQuery的设计宗旨是“write less, do more”，即用更少的代码完成更多的功能，jQuery支持CSS3和HTML5，使得开发者能够更快速地构建响应式网站和移动应用。
获取复选框选中的值
1、使用prop()方法获取复选框的状态（选中或未选中）
要获取复选框的状态，我们可以使用jQuery的prop()方法。prop()方法接受一个字符串参数，表示要获取的属性名，对于复选框，我们需要传入checked属性，当复选框被选中时，checked属性的值为true；否则为false。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery获取复选框选中的值</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox1">选项1
<input type="checkbox" id="checkbox2">选项2
<input type="checkbox" id="checkbox3">选项3
<button id="getCheckedValue">获取选中值</button>
<script>
$(document).ready(function() {
$("getCheckedValue").click(function() {
var checkedValues = [];
$("input[type='checkbox']:checked").each(function() {
checkedValues.push($(this).val());
});
alert("选中的值：" + checkedValues.join(", "));
});
});
</script>
</body>
</html>
2、使用attr()方法获取复选框的选中状态（已选中或未选中）
除了使用prop()方法获取复选框的状态外，我们还可以使用jQuery的attr()方法。attr()方法同样接受一个字符串参数，表示要获取的属性名，对于复选框，我们需要传入checked属性，当复选框被选中时，checked属性的值为true；否则为false，与prop()方法不同的是，attr()方法返回的是布尔值，而不是字符串。
示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery获取复选框选中的值</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="checkbox" id="checkbox1">选项1
<input type="checkbox" id="checkbox2">选项2
<input type="checkbox" id="checkbox3">选项3
<button id="getCheckedValue">获取选中值</button>
<script>
$(document).ready(function() {
$("getCheckedValue").click(function() {
var checkedValues = [];
$("input[type='checkbox']:checked").each(function() {
checkedValues.push($(this).attr("checked"));
});
alert("选中的值：" + checkedValues.join(", "));
});
});
</script>
</body>
</html>
相关问题与解答
问题1：如何获取多选框中所有选中项的值？
答：要获取多选框中所有选中项的值，可以使用jQuery的filter()方法过滤出选中的复选框，然后使用map()方法获取它们的值，示例代码如下：
var selectedValues = $("input[type='checkbox']:checked").map(function() {
return this.value;
}).get(); // 或者使用 .toArray() 转换为数组形式：var selectedValues = $("input[type='checkbox']:checked").map(function() { return this.value; }).toArray();
console.log(selectedValues); // 输出选中的值数组，["选项1", "选项3"] 或 ["选项2"]（如果只有一个选中项）
原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/156095.html
微信扫一扫 