JavaScript中遍历复选框组并按条件设置勾选状态，需先用getElementsByName或querySelectorAll获取元素集合，再遍历判断条件赋值checked属性，并可手动派发change事件确保逻辑同步。

在 JavaScript 中遍历复选框组并按条件设置勾选状态，核心是获取所有同名（或同类）的 <input type="checkbox"> 元素，然后逐个判断条件、赋值 checked 属性。

获取复选框元素集合

推荐使用 document.querySelectorAll() 或 document.getElementsByName() 获取所有目标复选框：

• 若复选框有相同 name 属性（如 name="hobby"），用：
  const checkboxes = document.getElementsByName("hobby");
  注意：返回的是 HTMLCollection，需转数组才能用 forEach（或直接用 for 循环）。
• 更灵活的方式是加类名或属性选择器，例如：
  const checkboxes = document.querySelectorAll('input[type="checkbox"].status-item');
  返回的是 NodeList，原生支持 forEach。

根据条件设置 checked 状态

遍历每个复选框，读取其值（value）、文本、数据属性等，再与你的条件比对：

• 比如只勾选 value 为 "js" 或 "html" 的项：
  

  checkboxes.forEach(cb => {<br>  cb.checked = ["js", "html"].includes(cb.value);<br>});

• 若条件依赖外部数据（如用户偏好数组）：
  

  const userPrefs = ["react", "node"];<br>checkboxes.forEach(cb => cb.checked = userPrefs.includes(cb.value));

• 也可结合 data- 属性判断：
  

  <input type="checkbox" value="dev" data-category="frontend"><br>...

  
  

  checkboxes.forEach(cb => {<br>  if (cb.dataset.category === "frontend") cb.checked = true;<br>});

注意表单提交与事件同步

单纯设置 checked 属性不会自动触发 change 事件，如果业务逻辑依赖监听该事件（如实时统计已选项数），需手动派发：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

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

• cb.checked = true;<br>cb.dispatchEvent(new Event("change", { bubbles: true }));

• 或者先绑定好监听器，再统一触发：
  

  checkboxes.forEach(cb => {<br>  cb.checked = shouldCheck(cb);<br>  cb.dispatchEvent(new Event("change"));<br>});

完整示例（带 HTML）

假设页面中有：

<input type="checkbox" name="skill" value="js"> JavaScript
<input type="checkbox" name="skill" value="css"> CSS
<input type="checkbox" name="skill" value="py"> Python

运行以下脚本即可勾选 js 和 css：

const skills = document.getElementsByName("skill");
Array.from(skills).forEach(cb => {
  cb.checked = ["js", "css"].includes(cb.value);
});