当前位置：首页 > jquery

jquery获取多选框的值

2026-03-17 08:30:03jquery

获取多选框的值

使用jQuery获取多选框（checkbox）的值时，需要注意多选框允许多选，因此需要遍历所有被选中的选项。以下是几种常见方法：

方法一：使用:checked选择器结合.each()遍历

jquery获取多选框的值

var selectedValues = [];
$('input[name="checkboxName"]:checked').each(function() {
    selectedValues.push($(this).val());
});
console.log(selectedValues);

方法二：使用.map()方法简化代码

var selectedValues = $('input[name="checkboxName"]:checked').map(function() {
    return $(this).val();
}).get();
console.log(selectedValues);

方法三：直接获取选中项的value数组（ES6语法）

jquery获取多选框的值

const selectedValues = [...$('input[name="checkboxName"]:checked')].map(el => el.value);
console.log(selectedValues);

注意事项

name="checkboxName"需替换为实际多选框的name属性值
若需要获取其他属性（如data-*），可将.val()替换为.attr('data-xxx')
未选中时返回空数组，建议先检查数组长度再使用数据

完整示例

HTML结构：

<input type="checkbox" name="colors" value="red"> Red
<input type="checkbox" name="colors" value="green"> Green
<input type="checkbox" name="colors" value="blue"> Blue
<button id="btn">Get Values</button>

jQuery代码：

$('#btn').click(function() {
    const colors = $('input[name="colors"]:checked').map(function() {
        return $(this).val();
    }).get();

    alert('Selected colors: ' + colors.join(', '));
});