当前位置：首页 > jquery

jquery获取选中的checkbox

2026-02-04 05:27:22jquery

使用 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>