本文介绍一种简洁高效的 jquery 方案，通过监听复选框状态变化，动态显示/隐藏对应类名的表格行，支持全显、单选、多选及取消选择后的自动恢复，无需手动维护状态变量。
在前端数据展示场景中，常需对表格内容按分类进行交互式筛选。本教程提供一个轻量、健壮且语义清晰的 jQuery 过滤方案——利用复选框值（如 "audio"）与表格行的 class 属性（如
✅ 核心逻辑说明
- 每次任一复选框被点击时，收集所有已勾选复选框的 value 值，构成一个白名单数组（如 ["audio", "video"]）；
- 遍历所有
元素，若其 class 属性值不在白名单中，则隐藏该行； - 若无任何复选框被勾选（白名单为空数组），.filter(...).hide() 不匹配任何元素，所有行自然保持可见——完美满足“全显”需求，无需额外 show() 调用。
? 推荐实现代码（jQuery 3.0+）
$('input[type="checkbox"]').on('click', function() { // 获取所有已勾选复选框的 value 值（如 ["audio", "writing"]） const activeCategories = $('input[type="checkbox"]:checked') .map((_, el) => $(el).val()) .get(); // 隐藏所有 class 不在 activeCategories 中的 <tr> $('table tr').filter(function() { const rowClass = $(this).attr('class'); return rowClass && !activeCategories.includes(rowClass); }).hide(); // 显示所有匹配 activeCategories 的行（确保切换时旧隐藏行被正确恢复） if (activeCategories.length > 0) { activeCategories.forEach(category => { $(`table tr.${category}`).show(); }); } });⚠️ 关键注意事项 表格行的 class 必须严格等于复选框的 value（如 对应 ），不支持多类名（如 class="audio featured"）。若需支持多类，可改用 $(this).hasClass(category) 替代 === 判断。 建议为复选框添加 name 属性（如 name="category-filter"）并使用更精确的选择器 $('input[name="category-filter"]')，避免误绑其他页面 checkbox。 如需兼容无 JS 环境，应在 HTML 中默认显示全部数据（即不设初始 display: none），保障渐进增强。
✅ 效果验证示例
操作 显示行 全未勾选 audio, video, writing, game 全部可见 仅勾选 audio 和 game 仅 和 可见 取消勾选 audio 自动隐藏 audio 行，其余保持可见 该方案代码简短（核心逻辑仅 6 行）、可读性强、无副作用，且天然支持任意数量的分类扩展——只需同步增删复选框与对应行 class 即可，是生产环境中值得复用的标准过滤模式。
