HTML多选过滤与复选框布局技巧

包裹，否则需额外绑定 click 事件。

横向排列用 CSS display: flex 或 inline-block；纵向用默认块级行为即可。注意设置 margin 或 gap 防止选项挤在一起。

<label>
  &lt;input type=&quot;checkbox&quot; name=&quot;brand&quot; value=&quot;apple&quot;&gt; Apple
</label>
<label>
  &lt;input type=&quot;checkbox&quot; name=&quot;brand&quot; value=&quot;samsung&quot;&gt; Samsung
</label>

JS 怎么拿到用户选中的品牌列表

别用 document.querySelectorAll('input[name="brand"]:checked') 然后遍历取 .value —— 这样写没问题，但容易漏掉「全未勾选」时返回空数组的逻辑处理。

更稳妥的是用 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 或简单禁用过渡动画能缓解。

好了，本文到此结束，带大家了解了《HTML多选过滤与复选框布局技巧》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！