单选与多选混用时name必须按维度严格区分，同名radio互斥覆盖、checkbox并列收集，混用会导致数据丢失；应统一用FormData读取并补全默认值，过滤时各条件独立判断，默认不限制。
单选（radio）和多选（checkbox）混用时，name 命名必须严格区分维度
同一筛选维度只能用一种控件类型，否则 FormData 会出错：比如「品牌」用 radio，就别再加一个同名 checkbox；「分类」用 checkbox，就别穿插 radio。浏览器对同名 radio 是互斥覆盖，而同名 checkbox 是并列收集——混用会导致后端只收到最后一个值，或直接丢弃部分数据。
正确做法是按业务语义拆命名：
-
brand→ 全部用（单选） -
feature→ 全部用（多选） -
price_range→ 用（单选下拉），别拆成多个 radio 模拟
表单提交前，如何安全读取 radio 和 checkbox 的混合状态
别手动查 document.querySelectorAll('input[type=radio]:checked') 再拼对象——容易漏掉未选中的 radio（它不产生值，但“未选中”本身是有效筛选状态，比如“不限品牌”应传空字符串或 null）。
统一走 FormData，再补全默认值：
- 先
const formData = new FormData(form) - 再用
Array.from(formData.entries())得到键值对数组，如[["brand", "apple"], ["feature", "bluetooth"]] - 对每个
name，检查是否在表单中存在但未被选中：比如form.elements.brand是 radio 组，但formData.get('brand')返回null，说明用户没选任何项，此时应显式设为""或"all" - checkbox 多值自动合并，无需额外处理；但注意：没勾选的 checkbox 不会进
FormData，所以不能靠get()判断是否存在，得用getAll()或提前初始化默认空数组
前端实时过滤时，radio 和 checkbox 的逻辑组合怎么写才不出错
核心是「每个条件独立判断，默认不限制」。常见错误是把 radio 当成必选项、把 checkbox 当成全有或全无——实际用户可能：选了品牌（radio）、没选任何 feature（checkbox 空）、价格留空（input 为空）。
过滤回调里应这样写：
- 提取当前值：
const brand = formData.get('brand') || ''（radio 未选返回null，转成空字符串表示“不限”） - 提取多选值：
const features = formData.getAll('feature')（返回数组，空数组表示“没选任何 feature”） - 逐行匹配：
if ((brand === '' || row.dataset.brand === brand) && (features.length === 0 || features.includes(row.dataset.feature))) { show = true } - 特别注意：
dataset值是字符串，features是字符串数组，直接用includes()安全；别用==或隐式转换
移动端点击区域小、点不中 radio/checkbox 怎么快速修复
根本原因不是样式丑，而是 label 没包住 input，或没用 for/id 关联。浏览器对裸 input 的触摸热区只有 12×12px 左右，极易点空。
两步搞定：
- 每个
input必须有唯一id，对应label的for属性： - 或者直接包裹：
—— 这样整个 label 区域都可点击 - 避免用
span+ JS 模拟，既增加维护成本，又破坏无障碍（screen reader 无法识别）
复杂点在于 radio 和 checkbox 混合时，不同维度的 label 语义容易混淆，比如“品牌”和“功能”相邻排列，用户扫一眼分不清哪个 label 对应哪个组——用 fieldset + legend 显式分组，比加 class 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
