应统一用 name 属性聚类多选按钮，通过 value 区分选项，避免依赖 id；JS 中用 querySelectorAll('input[name="xxx"]:checked') 获取勾选项并提取 value，后端需按框架规范正确解析同名多值。
用 name 统一、value 区分，别靠 id 抓取
多选按钮（<input type="checkbox">）本身不构成“组”的语义，全靠 name 属性聚类。浏览器只在提交表单时把同名且勾选的 checkbox 的 value 打包发送——这意味着 JS 里也得按 name 拿元素，而不是挨个查 id 或 class。
常见错误是给每个 checkbox 写不同 id，然后用一堆 document.getElementById() 判断 checked，既冗余又难维护。
- 所有 checkbox 必须有相同
name值（例如name="category"），否则后端收不到数组，JS 也难批量操作 -
value必须是字符串（数字会自动转成字符串），且应有意义（如value="1"、value="premium"），避免用value="on"这种默认值 - 不要依赖
id来识别选项，它只适合单点定位；name+value才是数据契约
querySelectorAll 配合 Array.from 提取勾选项
现代写法：用 document.querySelectorAll('input[name="category"]:checked') 直接拿到所有已勾选的 DOM 节点，再转成数组提取 value。比遍历全部 checkbox 判断 checked 更精准、更少副作用。
注意：NodeList 不是真数组，不能直接调用 .map()，必须先转。
立即学习“前端免费学习笔记（深入）”；
const checkedValues = Array.from(
document.querySelectorAll('input[name="category"]:checked')
).map(el => el.value);
- 如果用
for...of或forEach，记得确保 NodeList 已被转换，否则报TypeError: NodeList is not iterable - IE 不支持
:checked伪类在querySelectorAll中（IE8 及以下），若需兼容，改用document.getElementsByName()+ 循环判断 - 别漏掉空数组情况——用户一个没选时，
checkedValues是[]，后端或后续逻辑要能处理
后端接收时，确认框架是否自动解析为数组
前端发出去的是多个同名字段（如 category=1&category=3&category=5），但不同后端框架对这种重复 key 的处理差异很大。
- PHP 默认把同名 checkbox 解析成数组（
$_POST['category']是array），但前提是表单 enctype 是application/x-www-form-urlencoded（默认） - Node.js 的
express.urlencoded()默认也支持，但若用了extended: false，可能只取第一个值；设为true才能正确解析多值 - Python Flask 的
request.form.getlist('category')必须显式用getlist，get只返回第一个 - Spring Boot 的
@RequestParam List<String> category能自动绑定，但若写成@RequestParam String category就只拿到首个
避免用 change 频繁触发，改用 submit 或防抖
监听每个 checkbox 的 change 事件来实时收集值，看似直观，但容易引发性能问题或逻辑错乱——比如用户快速连点两个选项，中间状态可能被误判。
- 多数场景下，真正需要数据的时机是表单提交（
submit），此时统一取值更稳 - 若确需实时响应（如筛选器），给事件加简单防抖（300ms），避免高频触发
- 别在
change里直接发请求，尤其涉及接口限频或副作用时；先存本地状态，再由主逻辑统一调度
勾选状态和 value 的映射关系容易被忽略——比如 UI 上显示“高级会员”，但传的是 "vip"，一旦前后端约定不一致，调试时很难一眼发现。
