HTML无法实现多条件筛选，必须由JavaScript驱动；正确做法是监听input事件、用FormData统一采集数据、用applyFilter集中处理逻辑并批量更新DOM。
HTML 本身不能“绑定多条件筛选事件”——它没有判断逻辑、没有状态管理、也没有数据过滤能力。所有筛选行为必须由 JavaScript 驱动，HTML 只负责提供语义化结构和可读取的状态源。
为什么不能只用 onclick 或 onsubmit 实现多条件筛选
常见错误是给按钮加 onclick="filterData()"，然后在函数里分别读取多个 input 值再过滤。问题在于：
- 用户改完一个框还没点按钮，筛选结果就已过期
- 移动端频繁触发
input事件时，若每个都调一次完整过滤，DOM 操作会卡顿 -
onsubmit只在表单提交时触发，但筛选本不该刷新页面 - 多个
input各自绑onchange，容易因执行顺序或异步导致状态不一致
正确做法：用 input 事件统一监听 + 批量读取状态
所有筛选输入框（input、select、checkbox）共用一个事件回调，且只在回调中一次性读取全部值：
- 监听
input事件（不是change），保证实时响应中文输入法的中途输入 - 用
form.elements或new FormData(form)统一采集，避免漏掉 disabled 或未聚焦项 - 对 checkbox 多选，
FormData自动返回多个同名键值对，不用手动遍历querySelectorAll('[name="brand"]:checked') - 价格区间等成对字段（如
price_min和price_max）需显式判断是否为空，再组合条件
示例关键代码：
立即学习“前端免费学习笔记（深入）”；
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
const filterForm = document.getElementById('filter-form');
filterForm.addEventListener('input', () => {
const formData = new FormData(filterForm);
const filters = Object.fromEntries(formData.entries());
// 注意：多个同名 checkbox 的值会被最后一个覆盖，要用 Array.from(formData.entries())
const brands = Array.from(formData.getAll('brand'));
applyFilter({ ...filters, brand: brands });
});
checkbox 多选时容易忽略的坑
多条件筛选中品牌、分类等常使用 checkbox，但直接读 value 或 checked 状态极易出错：
-
formData.get('brand')只返回第一个勾选项，必须用formData.getAll('brand') - 如果某项没勾选，
getAll()返回空数组，不是null或undefined，别用== null判空 - 后端要求参数是
?brand=apple&brand=samsung，前端 name 就得严格写成name="brand"，不能加下划线或前缀 - 不要用
click事件监听 checkbox —— 用户空格键切换也会触发input，但不会触发click
避免竞态：别在每个 input 里直接操作 DOM
最典型的翻车现场：两个搜索框，用户快速交替输入，结果只反映最后一次的值。这是因为每次回调都重置了整个表格的 display 状态，中间那次被覆盖了。
解决方式很朴素：
- 所有筛选逻辑收口到一个函数，比如
applyFilter(filters) - 该函数内部先遍历所有数据行（或原始数据数组），逐行判断是否匹配全部条件
- 匹配逻辑必须用单次
filter()回调，而不是链式调用多个.filter()—— 否则某次过滤把数据清空了，后续条件无从判断 - DOM 更新集中做：先收集所有要显示/隐藏的
<tr> 元素，再统一设 <code>style.display真正难的不是写代码，而是让“用户觉得筛选是实时的”，又不让浏览器卡住。这需要你控制好事件频率（必要时加防抖）、减少重复 DOM 查询、以及把清洗逻辑（如去全角空格、大小写归一）提前做好，别塞进每轮循环里。
