获取已勾选checkbox值最简方式是：const checkedValues = [...document.querySelectorAll('input[type="checkbox"]:checked')].map(el => el.value)；可加父选择器限定范围，如.class或#id；按name筛选用input[name="xxx"]:checked；旧IE需用getElementsByTagName遍历。

用 document.querySelectorAll 选中所有被勾选的多选框（input[type="checkbox"]:checked），再遍历提取 value 属性即可。

获取所有已勾选的 checkbox 值

最常用、简洁的方式是结合 querySelectorAll 和 Array.from（或展开运算符）：

const checkedValues = Array.from(
  document.querySelectorAll('input[type="checkbox"]:checked')
).map(checkbox => checkbox.value);

或者更现代写法（ES2015+）：

const checkedValues = [...document.querySelectorAll('input[type="checkbox"]:checked')].map(el => el.value);

限定在某个容器内查找

如果页面中有多个多选区域，避免误取，可加父级选择器限定范围：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

立即学习“Java免费学习笔记（深入）”；

• 按 class 查找：document.querySelectorAll('.my-form input[type="checkbox"]:checked')
• 按 id 查找：document.querySelectorAll('#user-permissions input[type="checkbox"]:checked')
• 用 form 元素直接查：document.querySelector('#myForm').querySelectorAll('input[type="checkbox"]:checked')

注意 name 属性与未勾选项

多选框通常靠 name 分组，但获取值时只关心是否 :checked，和 name 无关。未勾选的 checkbox 不会出现在结果中，无需额外过滤。

若想获取「某 name 下所有勾选项」，可加属性选择器：

const roleValues = [...document.querySelectorAll('input[name="role"]:checked')].map(el => el.value);

兼容旧浏览器（如 IE8）的写法

若需支持老版本 IE，不能用 querySelectorAll 或箭头函数，可改用：

var checkboxes = document.getElementsByTagName('input');
var checkedValues = [];
for (var i = 0; i < checkboxes.length; i++) {
  if (checkboxes[i].type === 'checkbox' && checkboxes[i].checked) {
    checkedValues.push(checkboxes[i].value);
  }
}