html多选框用实现，需统一name值分组、设value区分选项、禁用id重复；js通过queryselectorall获取全部并手动同步checked/indeterminate状态。
HTML 多选框怎么写：用 <input type="checkbox"> 实现多项选择
多选框本质就是一组独立的 <input type="checkbox">，它们之间没有强制关联，靠 name 和 value 配合后端或 JS 逻辑来聚合数据。别被“多选”二字误导——浏览器不会自动帮你收集所有勾选项，得自己处理。
常见错误现象：document.querySelector('input[name="hobbies"]') 只拿到第一个 checkbox；提交表单时只传了最后一个勾选的值；全选/反选 JS 逻辑漏掉动态插入的选项。
-
name属性可以相同（便于分组识别），但不是必须——JS 获取时更依赖querySelectorAll或 class -
value必须设，否则勾选后提交的是默认的"on"，后端很难区分选项含义 - 不要给多个 checkbox 设同一个
id，ID 必须唯一，否则document.getElementById行为不可控
怎么让多个 checkbox 组成逻辑上的“一组”？
靠约定，不是靠语法。HTML 本身不定义“组”，所谓“一组”是开发者通过命名、class 或 DOM 结构自己建立的上下文。
使用场景：用户选兴趣爱好、权限配置、批量操作开关等。关键在后续如何读取和提交。
立即学习“前端免费学习笔记（深入）”；
- 推荐统一加
class="checkbox-group"，JS 用document.querySelectorAll('.checkbox-group')安全获取全部 - 如果走表单原生提交，
name设为相同值（如name="role"），后端会收到多个同名参数（如 PHP 的$_POST['role']是数组，Node.js 的body-parser默认也支持） - 避免用
name="hobbies[]"这类带方括号的写法——虽在某些后端框架中方便，但不符合 HTML 规范，且容易在 JS 中误判属性名
全选/反选功能 JS 怎么写才不翻车？
核心陷阱：监听的是主 checkbox 的 change 事件，但子项状态变更后，主 checkbox 的勾选状态要靠 JS 手动同步，不能只靠初始渲染。
性能影响小，但逻辑断点常出现在 DOM 动态增删后未重新绑定，或忽略了 indeterminate 状态（即部分勾选）。
- 主 checkbox 的
indeterminate状态需手动设置：mainCheckbox.indeterminate = true，它不触发change事件，得用click或单独监听 - 子 checkbox 变更时，必须重新计算已勾选项数量，再更新主 checkbox 的
checked和indeterminate - 别用
for...in遍历NodeList，用forEach或普通for循环，避免原型链污染问题
const main = document.getElementById('select-all');
const items = document.querySelectorAll('.item-checkbox');
main.addEventListener('change', () => {
items.forEach(cb => cb.checked = main.checked);
});
items.forEach(item => {
item.addEventListener('change', () => {
const checkedCount = document.querySelectorAll('.item-checkbox:checked').length;
main.checked = checkedCount === items.length;
main.indeterminate = checkedCount > 0 && checkedCount < items.length;
});
});
提交时怎么安全获取所有选中的值？
别依赖表单序列化结果是否“看起来对”，要明确知道每个值从哪来。原生表单提交和 AJAX 提交路径不同，但数据采集逻辑一致。
兼容性影响：IE9+ 和所有现代浏览器对 querySelectorAll + :checked 伪类支持良好，无需 polyfill。
- 最稳方式：
Array.from(document.querySelectorAll('input[type="checkbox"]:checked')).map(cb => cb.value) - 如果 checkbox 被禁用（
disabled），它不会出现在表单提交中，也不会被:checked选中——这点常被忽略 - 注意空字符串
value=""也是合法值，别在 JS 里用if (cb.value)过滤，要用cb.checked判断是否勾选
value 留空导致后端收不到有效标识。只要 value 写对、DOM 查询范围写准、状态同步写全，多选这件事就不再有隐藏分支。 
