如何获取所有已勾选列表项的值？（示例仅支持单个值获取）

嗨，我明白你遇到的问题了——网上很多基础示例只演示了获取单个勾选列表项的值，但实际开发中我们经常需要一次性拿到所有已选中的内容。下面我分几种常见的技术场景给你具体实现方案，都是前端项目里常用的方法：

如果你的项目没有用任何框架或库，原生JS就能轻松搞定：

• 复选框列表场景：

// 选中页面上所有已勾选的复选框
const checkedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
// 将DOM元素转换成值的数组
const checkedValues = Array.from(checkedBoxes).map(box => box.value);
console.log(checkedValues); // 输出所有选中值组成的数组

• 多选下拉列表（<select multiple>）场景：

const multiSelect = document.getElementById('your-select-id');
// 从选中的option元素中提取值
const checkedValues = Array.from(multiSelect.selectedOptions).map(opt => opt.value);
console.log(checkedValues);

如果你的项目依赖jQuery，代码会更简洁直观：

• 复选框列表：

const checkedValues = $('input[type="checkbox"]:checked').map(function() {
  return this.value;
}).get(); // 调用get()把jQuery对象转换成普通数组
console.log(checkedValues);

• 多选下拉列表：

const checkedValues = $('#your-select-id option:selected').map(function() {
  return this.value;
}).get();
console.log(checkedValues);

在Vue这类现代框架里，官方已经提供了非常便捷的方式，无需手动操作DOM：

<!-- 复选框组示例 -->
<div id="app">
  <input type="checkbox" v-model="selectedItems" value="apple"> 苹果
  <input type="checkbox" v-model="selectedItems" value="banana"> 香蕉
  <input type="checkbox" v-model="selectedItems" value="orange"> 橙子
</div>

<script>
// Vue 2 写法
new Vue({
  el: '#app',
  data() {
    return {
      selectedItems: [] // 这个数组会自动收集所有选中项的值
    }
  }
});

// Vue 3 Composition API 写法
import { createApp, ref } from 'vue';
createApp({
  setup() {
    const selectedItems = ref([]);
    return { selectedItems };
  }
}).mount('#app');
</script>

提示：如果用Element UI、Ant Design Vue这类UI库的多选组件，也是类似逻辑，通过v-model绑定数组即可自动收集选中值。

小提醒 #

• 记得给所有勾选元素设置value属性，不然默认会拿到字符串"on"，影响数据准确性；
• 如果是自定义的勾选组件，要先看组件文档的取值方式，有些组件会返回对象而非单纯的value值。

内容的提问来源于stack exchange，提问作者Mortality