用<input type="checkbox">实现品牌多选过滤需统一name（如brand）、为每个设置唯一value（如"apple"），包裹在<label>中保证可访问性与样式控制，JS通过FormData.getAll('brand')安全获取选中值数组。
怎么用 <input type="checkbox"> 实现品牌多选过滤
直接用原生 HTML + 少量 JS 就能实现，不需要框架。关键是把每个 <input> 的 name 设为相同（如 brand），并用 value 区分品牌标识（如 "apple"、"samsung"）。浏览器会自动把勾选项以数组形式提交（表单场景）或供 JS 读取（交互过滤场景）。
常见错误是漏掉 value —— 如果所有 checkbox 都没设 value，默认值是 "on"，后端或 JS 拿到的全是重复字符串，无法区分品牌。
<input type="checkbox" name="brand" value="apple"> Apple<input type="checkbox" name="brand" value="samsung"> Samsung<input type="checkbox" name="brand" value="xiaomi"> Xiaomi
checkbox 组怎么排版才不乱、可维护
纯靠 <input> 自己没法对齐或加样式，必须包裹在语义化容器里。<label> 是最轻量且无障碍友好的选择：点击文字也能触发勾选。避免用 <div> 或 <p> 包裹，否则需额外绑定 click 事件。
横向排列用 CSS display: flex 或 inline-block；纵向用默认块级行为即可。注意设置 margin 或 gap 防止选项挤在一起。
立即学习“前端免费学习笔记（深入）”；
<label> <input type="checkbox" name="brand" value="apple"> Apple </label> <label> <input type="checkbox" name="brand" value="samsung"> Samsung </label>
JS 怎么拿到用户选中的品牌列表
别用 document.querySelectorAll('input[name="brand"]:checked') 然后遍历取 .value —— 这样写没问题，但容易漏掉「全未勾选」时返回空数组的逻辑处理。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
更稳妥的是用 FormData（兼容性好，IE10+）：
const form = document.querySelector('#filter-form');
form.addEventListener('change', () => {
const data = new FormData(form);
const brands = Array.from(data.getAll('brand')); // 返回 string[]，如 ['apple', 'xiaomi']
filterProducts(brands);
});注意：data.getAll() 在没有任何勾选时返回空数组，不是 null 或 undefined，可直接用于后续逻辑。
为什么用 name 相同而不是 class 或 data-* 属性
因为表单提交和 FormData 机制只认 name。用 class="brand-checkbox" 或 data-brand="apple" 看似灵活，但会切断与原生表单能力的连接——比如用户按回车提交表单时，这些自定义属性不会被提交，后端收不到数据。
如果项目完全不用表单提交（纯前端过滤），那用 data- 也行，但得自己管理状态、重置逻辑、键盘操作（空格切换）、焦点管理，成本远高于老老实实用 name。
真正容易被忽略的点是：移动端 Safari 对连续点击 checkbox 有微小延迟，如果过滤响应慢，用户可能误以为没点上。加个 touch-action: manipulation 或简单禁用过渡动画能缓解。
