必须监听form的submit事件并在首行同步调用e.preventDefault()，否则回车、submit按钮或JS调用form.submit()均会绕过验证直接提交；禁用click监听和onsubmit内联写法。
点击筛选按钮没反应？检查 submit 事件监听和 preventDefault
常见错误是只写 <button type="submit"></button> 却没绑定事件或忘记调用 event.preventDefault()。表单默认会刷新页面，导致看起来“点了没反应”。必须显式监听 submit 事件，并阻止默认行为：
document.getElementById('filter-form').addEventListener('submit', function (e) {
e.preventDefault();
applyFilters();
});
别用 click 监听按钮——用户按回车提交时会跳过；也别漏掉 preventDefault()，否则页面重载，筛选状态全丢。
多选 checkbox 怎么取值才不漏项？用 FormData.getAll() + Set 去重
当品牌、分类等字段允许多选时，<input type="checkbox" name="brand" value="apple"> 可能被选中多个。直接用 form.elements.brand.value 只拿第一个，querySelectorAll('[name="brand"]:checked') 又容易漏掉动态插入的选项。
正确做法是统一用 FormData 提取：
立即学习“前端免费学习笔记（深入）”；
const formData = new FormData(document.getElementById('filter-form'));
const brands = new Set(formData.getAll('brand'));
// 后续用 brands.has(item.brand) 判断，比 array.includes() 快且自动去重
- 注意：后端接口参数名（如
brand=apple&brand=samsung）必须和前端name一致 -
getAll()返回数组，即使只选一个也是['apple']，不会出错 - 用
Set而不是数组存状态，避免重复点击同一 checkbox 导致逻辑混乱
筛选后怎么保持 URL 同步？手动 pushState + 解析 query string
用户刷新页面后筛选条件消失，是因为没把状态同步到 URL。纯 HTML 不会自动做这事，得自己解析 location.search 并填充表单，再用 history.pushState() 更新地址栏：
function updateUrlParams() {
const formData = new FormData(document.getElementById('filter-form'));
const params = new URLSearchParams(formData);
history.pushState(null, '', `?${params}`);
}
// 初始化时读取 URL 参数并设表单值
const urlParams = new URLSearchParams(location.search);
urlParams.forEach((val, key) => {
const el = document.querySelector(`[name="${key}"]`);
if (el && el.type === 'checkbox') el.checked = urlParams.getAll(key).includes(val);
else if (el) el.value = val;
});
别依赖 form.getAttribute('action') 拼 URL——它可能含路径，也可能为空；也别用 localStorage 替代 URL 同步，用户分享链接时对方看不到筛选结果。
移动端点不中？label 没包住 input 或 touch 区域太小
常见现象是 PC 上能点，手机上要点两三次才生效。根本原因是复选框本身尺寸极小（通常 12×12px），而移动端最小触控建议区域是 44×44px。
修复方式只有两个：
- 用
<label></label>包裹整个input，确保点击文字也能触发：<label><input type="checkbox" name="status"> 已启用</label> - 给
label加 CSS：label { min-height: 44px; display: flex; align-items: center; }，撑开可点区域
别用 margin 或 padding 单独撑 checkbox——它不响应这些样式；也别加 ontouchstart 事件模拟，现代浏览器对 label 的 click 兼容性已足够好。
