复选框筛选需每次change后重新获取选中值（Array.from(document.querySelectorAll('input:checked')).map(x => x.value)），用selected.some()实现OR过滤，避免状态同步、空数组和事件时机问题。
复选框值怎么获取并用于筛选逻辑
浏览器原生不提供“多选值自动聚合”功能，document.querySelectorAll('input[type="checkbox"]:checked') 是最直接的取值方式。别用 document.getElementById 单个查——复选框必然有多个，必须用 NodeList 遍历。
常见错误是直接读 input.value：它永远是写死的字符串（比如 "java"），和是否勾选无关；真正要判断的是 input.checked 属性。
实操建议：
- 给所有筛选用的复选框加统一
name（如name="tech"）或 class（如class="filter-checkbox"），方便批量查询 - 用
Array.from()转换 NodeList，再用.map()提取value，避免手写 for 循环 - 示例：
const selected = Array.from(document.querySelectorAll('input[name="tech"]:checked')).map(cb => cb.value);
如何用复选框值过滤数据数组
筛选本质是数组的 filter() + 条件判断。关键在“多条件”的逻辑关系：是「全选中才匹配」（AND）还是「任一选中即匹配」（OR）？绝大多数前端筛选场景用 OR，比如“选了 JavaScript 或 Python 就显示相关条目”。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑是把 selected.includes(item.tag) 写成 selected.indexOf(item.tag) > -1——后者在 selected 为空数组时会误判为 false，而 includes() 更直观且兼容性足够（IE 不支持，但现代项目基本不考虑）。
实操建议：
- 先确保数据项有明确标签字段（如
item.technologies = ['js', 'node']） - OR 筛选：用
selected.some(tag => item.technologies.includes(tag)) - AND 筛选（少见）：用
selected.every(tag => item.technologies.includes(tag))，注意此时若selected为空，结果恒为 true，通常需额外判断
点击复选框后如何实时更新列表
监听 change 事件，不是 click。因为键盘空格切换也会触发 change，而 click 在某些 focus 状态下可能漏触发。
性能影响点：每次勾选都全量重绘列表，若数据量大（>500 条），会卡顿。简单优化是加节流，但更推荐用 DocumentFragment 批量插入，或直接操作 innerHTML（前提是内容可信，无 XSS 风险）。
实操建议：
- 把渲染逻辑抽成独立函数（如
renderList(items)），便于复用 - 绑定事件时用事件委托：给父容器（如
<div id="filters">）监听，检查 <code>e.target.matches('input[type="checkbox"]')，减少监听器数量 - 避免在循环里反复查 DOM（如每次 render 都
document.getElementById('list')），提前缓存节点引用 - 不要用
let selected = []+ push/pop 维护，每次从 DOM 重新读取：const selected = [...document.querySelectorAll('input:checked')].map(x => x.value) - 如果复选框本身需要“全选/反选”按钮，注意它的逻辑也要走同一套取值流程，不能单独写一套
- 调试时直接在控制台执行
Array.from(document.querySelectorAll('input:checked')).map(x => x.value)，比看 checkbox 的 checked 属性更直观
为什么筛选后复选框状态和结果不一致
典型现象：勾选 “React”，列表变少了；再勾选 “Vue”，列表没变化，但两个框都亮着。根本原因是筛选逻辑没处理“空选择”状态——当用户取消所有勾选时，代码仍按旧的 selected 数组执行，而这个数组没被清空。
根本解法是每次 change 后重新生成 selected，而不是靠 toggle 变量维护。很多人试图用布尔变量标记“是否已选”，反而引入状态同步 bug。
实操建议：
复选框筛选看着简单，但状态同步、空数组边界、事件时机这三点最容易反复出问题。别省那几行代码，每次都重新取值，比维护中间状态可靠得多。
