当前位置：首页 > jquery

jquery获取checkbox选中的值

2026-02-04 07:54:17jquery

jQuery获取checkbox选中的值

使用jQuery获取被选中的checkbox的值可以通过多种方式实现，以下是几种常见的方法：

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

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

方法二：使用.map()和.get()组合

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

方法三：针对特定name的checkbox

如果checkbox有共同的name属性，可以使用以下方式：

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

方法四：获取选中checkbox的value并拼接为字符串

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

注意事项

确保checkbox有value属性，否则获取的值可能为空。
如果需要获取多个checkbox的值，建议使用数组存储。
在表单提交时，只有被选中的checkbox的值会被提交。

示例HTML

jquery获取checkbox选中的值

<input type="checkbox" name="fruit" value="apple"> Apple
<input type="checkbox" name="fruit" value="banana"> Banana
<input type="checkbox" name="fruit" value="orange"> Orange