如何使用jQuery获取所有已勾选checkbox的value值？

你给出的示例HTML结构如下：

<input class="messageCheckbox" type="checkbox" value="3" checked>
<input class="messageCheckbox" type="checkbox" value="1" checked>
<input class="messageCheckbox" type="checkbox" value="2" checked>

实现方案 #

方案1：快速生成值数组 #

这是最简洁的实现方式，可直接拿到所有勾选值组成的普通数组：

// 执行后得到字符串类型数组 ["3","1","2"]
const checkedValues = $('.messageCheckbox:checked').map(function() {
  return this.value;
}).get();

代码逻辑说明：

• 选择器.messageCheckbox:checked会精准筛选出所有类名为messageCheckbox且处于勾选状态的checkbox元素
• map()方法遍历所有匹配元素，返回每个元素的value值
• 末尾调用get()将jQuery类数组对象转换为原生JavaScript数组，方便后续直接操作
  如果需要得到数字类型的数组，修改return语句即可：

// 执行后得到数字类型数组 [3,1,2]
const checkedValues = $('.messageCheckbox:checked').map(function() {
  return Number(this.value);
}).get();

方案2：each遍历支持自定义逻辑 #

如果遍历过程中需要额外处理其他业务，可以用each()方法实现：

const checkedValues = [];
$('.messageCheckbox:checked').each(function() {
  const currentVal = $(this).val();
  checkedValues.push(currentVal);
  // 此处可添加其他业务逻辑，比如值校验、字符串拼接等
});

内容的提问来源于stack exchange，提问作者Văn Duy