本文介绍如何通过 jquery 实现基于多个复选框的表格行动态过滤：仅显示被至少一个已勾选复选框所对应类名的行，未勾选的类别将自动隐藏其关联行，且支持全不勾选时显示全部。
在 Django 前端中实现交互式表格过滤时，直接操作 id 属性进行批量显隐存在局限性（如 ID 必须唯一、无法高效匹配多条件），更健壮的做法是统一使用语义化 class 名管理行类型，并结合 jQuery 的选择器逻辑完成实时过滤。
✅ 正确的 HTML 结构改造
首先，将
<tbody>
<tr class="genre-row {{ i.media_type }}">
<td>{{ some data }}</td>
<td>{{ some other data }}</td>
</tr>
</tbody>同时确保复选框 value 与媒体类型完全一致（注意大小写和拼写）：
<div> <input type="checkbox" value="audio" id="audio_filter" checked> <label for="audio_filter">Audio</label> <input type="checkbox" value="video" id="video_filter" checked> <label for="video_filter">Video</label> <input type="checkbox" value="writing" id="writing_filter" checked> <label for="writing_filter">Writing</label> <input type="checkbox" value="games" id="games_filter" checked> <label for="games_filter">Games</label> </div>
⚠️ 注意：原问题中 checkbox value="music" 但行 ID 是 "audio"，二者需严格一致（推荐统一用 audio/video/writing/games）。Django 模板中 {{ i.media_type }} 应输出这些标准值。
✅ 核心 jQuery 过滤逻辑（修复版）
以下代码实现了你描述的业务逻辑：
- ✅ 全未勾选 → 显示所有行
- ✅ 至少一个勾选 → 仅显示被勾选类别对应的行（即“白名单模式”）
- ✅ 实时响应每次点击，无需刷新页面
$(document).ready(function() {
const $checks = $('#audio_filter, #video_filter, #writing_filter, #games_filter');
const $rows = $('.genre-row');
$checks.on('change', function() {
// 获取所有已勾选的 checkbox 的 value 值
const checkedValues = $checks.filter(':checked').map(function() {
return $(this).val();
}).get();
if (checkedValues.length === 0) {
// 全未勾选：显示全部
$rows.show();
} else {
// 只显示 class 匹配任一已勾选 value 的行
$rows.hide();
checkedValues.forEach(cls => {
$(`.${cls}`).show();
});
}
});
});? 关键设计说明
-
为什么用 class 而非 id？
HTML 中 id 必须全局唯一，而多个可能属于同一类型（如多个 audio 行），使用 class="audio" 才符合语义且支持批量操作。 为什么是“白名单”而非“黑名单”？
你的需求本质是：“只保留被选中的类型”，而非“排除未选中的类型”。例如勾选 audio 和 video 时，应仅显示 audio 和 video 行 —— 这正是上述代码的行为。性能考虑：100 行以内 DOM 操作极快，无需防抖或虚拟滚动。
? 常见错误修正（来自原始代码）
原问题代码 问题分析 修复方式 $('#music_filter', '#video_filter', ...) 多选择器语法错误（逗号分隔应为单个字符串） 改为 $('#audio_filter, #video_filter, ...') $('#i').toggle() #i 是字面量 ID，非变量；且循环中未拼接值 改用 $(".${cls}") 动态选择类 未处理“全未勾选”分支 导致无勾选时无行为 显式判断 checkedValues.length === 0 使用 click 而非 change 用户通过键盘空格切换时可能漏触发 统一用 change 事件 ✅ 最终效果验证
复选框状态 显示的表格行 全部未勾选 audio, video, writing, games 全部可见 仅勾选 audio 仅 class="audio" 的 显示 勾选 audio + writing 所有 audio 和 writing 行显示，其余隐藏 ? 提示：若需服务端分页兼容，应在 Django 视图中同步处理 GET 参数（如 ?media=audio&media=writing），前端过滤仅作为增强体验。当前方案纯客户端，适合小数据量场景。
此方案简洁、可维护、符合前端最佳实践，可直接集成到 Django 模板中使用。
