jquery获取选中的checkbox
使用 jQuery 获取选中的 checkbox
通过 jQuery 可以方便地获取页面上被选中的 checkbox 元素。以下是几种常用的方法：
方法一：使用 :checked 选择器
var checkedBoxes = $('input[type="checkbox"]:checked');方法二：使用 .filter() 方法
var checkedBoxes = $('input[type="checkbox"]').filter(':checked');方法三：获取选中 checkbox 的值
如果需要获取选中 checkbox 的 value 值，可以使用 .each() 遍历：
var selectedValues = [];
$('input[type="checkbox"]:checked').each(function() {
selectedValues.push($(this).val());
});方法四：获取特定组（name）的选中 checkbox
如果 checkbox 有共同的 name 属性，可以通过 name 选择器筛选：
var groupChecked = $('input[name="groupName"]:checked');方法五：判断单个 checkbox 是否选中
对于单个 checkbox，可以使用 .prop('checked') 方法：
var isChecked = $('#checkboxId').prop('checked');示例代码
以下是一个完整的示例，展示如何获取选中的 checkbox 并打印其值：
<!DOCTYPE html>
<html>
<head>
<title>jQuery 获取选中的 checkbox</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange
<button id="btn">获取选中的值</button>
<script>
$('#btn').click(function() {
var selected = [];
$('input[name="fruit"]:checked').each(function() {
selected.push($(this).val());
});
console.log('选中的值:', selected);
});
</script>
</body>
</html>注意事项
- 确保在 DOM 加载完成后执行 jQuery 代码，可以将代码放在
$(document).ready()中。 - 如果 checkbox 是动态生成的，可能需要使用事件委托（如
.on()）来绑定事件。
通过这些方法，可以灵活地获取和处理页面中被选中的 checkbox 元素。
