JavaScript中获取复选框多选结果需用querySelectorAll或getElementsByName筛选checked项并提取value；设置则直接赋值checked布尔值，禁用setAttribute设字符串。
在 JavaScript 中获取和设置复选框的多选结果，核心是操作 checked 属性，并通过遍历或选择器批量处理多个同名（或同类）复选框。
获取所有被选中的复选框值
通常复选框会共享同一个 name 属性（如 name="hobby"），我们可以通过 document.querySelectorAll 或 document.getElementsByName 获取全部，再筛选出已勾选的。
- 使用
querySelectorAll（推荐，更灵活）：
<input type="checkbox" name="hobby" value="reading"> 阅读
<input type="checkbox" name="hobby" value="music"> 音乐
<input type="checkbox" name="hobby" value="sports"> 运动
const checkedValues = Array.from(
document.querySelectorAll('input[name="hobby"]:checked')
).map(cb => cb.value);<br>// 结果示例：['reading', 'sports']
- 使用
getElementsByName（兼容老浏览器）：
const checkboxes = document.getElementsByName('hobby');<br>const checkedValues = [];<br>for (let cb of checkboxes) {<br> if (cb.checked) checkedValues.push(cb.value);<br>}
设置指定复选框为选中状态
直接给 checked 属性赋布尔值即可。注意：不能用 setAttribute 设置 "checked" 字符串，那只是初始属性，不反映实时状态。
- 按 value 设置（例如让“音乐”被选中）：
document.querySelector('input[name="hobby"][value="music"]').checked = true;
- 批量设置（例如恢复上次保存的选项）：
const saved = ['reading', 'music'];<br>document.querySelectorAll('input[name="hobby"]').forEach(cb => {<br> cb.checked = saved.includes(cb.value);<br});
监听复选框变化并实时更新
给每个复选框加 change 事件，或委托到父容器（更高效）：
document.querySelector('.hobby-group').addEventListener('change', e => {<br> if (e.target.type === 'checkbox' && e.target.name === 'hobby') {<br> const current = Array.from(<br> document.querySelectorAll('input[name="hobby"]:checked')<br> ).map(cb => cb.value);<br> console.log('当前选中：', current);<br> }<br});
注意事项与常见坑
-
不要用
getAttribute('checked')判断是否选中——它返回的是 HTML 属性（可能为null或字符串），应始终用element.checked（布尔值）； - 表单提交时，只有
checked为true的复选框才会作为键值对发送（如hobby=reading&hobby=music）； - 若复选框没有
value，提交时默认值为"on"，建议显式设置value； - 动态添加的复选框需确保事件监听覆盖，或使用事件委托。
