本文介绍在 django 前端中使用 jquery 实现「仅显示被勾选类型对应表格行」的交互逻辑：当多个复选框控制分类过滤时，自动隐藏所有未被勾选类型的行，且支持零勾选（全显）与多选组合。
要实现“仅保留已勾选分类对应的表格行”，核心逻辑是：当至少一个复选框被勾选时，隐藏所有不属于任一已勾选分类的行；若全部未勾选，则显示全部行。原代码存在几个关键问题：
- 使用 id="{{i.media_type}}" 作为行标识，但 jQuery 中 $('#i') 是错误写法（将字符串 "i" 当作 ID），且 ID 不适合用于批量操作；
- $('#music_filter', '#video_filter', ...) 的选择器语法错误——逗号在 jQuery 中表示多个独立选择器，而非组合，此处应使用 .on('click', ...) 绑定到父容器或统一类名；
- 仅遍历 notChecked 却未映射到对应行，导致无法精准控制显隐。
✅ 正确做法是：
-
将 id 改为 class（如
），因为一类值可能对应多行，而 ID 必须唯一； - 为每行添加通用类（如 all-genre）便于统一控制；
- 监听所有复选框变化，收集已勾选值，再批量切换行可见性。
以下是优化后的完整实现：
内容类型 描述 {{ item.title }} {{ item.description }} $(document).ready(function() { // 统一绑定事件：监听所有 filter 复选框 $('.filter-controls input[type="checkbox"]').on('change', function() { // 获取所有已勾选的 value 数组，如 ['music', 'writing'] const checkedValues = $('.filter-controls input:checked').map(function() { return $(this).val(); }).get(); // 若无任何勾选 → 显示全部 if (checkedValues.length === 0) { $('.all-genre').show(); return; } // 否则：先隐藏全部，再显示匹配的 $('.all-genre').hide(); checkedValues.forEach(className => { $(`.${className}`).show(); }); }); });? 关键说明与注意事项：
- ✅ 语义清晰：.all-genre 是所有数据行的公共类，便于统一控制；每个媒体类型（music/video等）作为独立类名，天然支持多类型共存（如某行同时含 music video 类）；
- ✅ 性能友好：100 行以内 DOM 操作开销极小，无需防抖；
- ⚠️ Django 模板注意：确保 item.media_type 输出值严格等于复选框 value（如均为小写、无空格），否则类名不匹配；
- ⚠️ 分页兼容性：此方案纯前端过滤，不影响后端分页。如需服务端过滤，请改用表单提交 + 视图参数处理（推荐生产环境采用）；
- ? 可扩展建议：后续可增加「全选/反选」按钮，或用 data-* 属性解耦 HTML 与 JS 逻辑。
通过以上结构化实现，你将获得一个响应迅速、逻辑健壮且易于维护的前端过滤功能。
