如何基于未勾选复选框动态显示/隐藏表格行-js教程

本文介绍在 django 前端中使用 jquery 实现「仅显示被勾选类型对应表格行」的交互逻辑：当多个复选框控制分类过滤时，自动隐藏所有未被勾选类型的行，且支持零勾选（全显）与多选组合。

要实现“仅保留已勾选分类对应的表格行”，核心逻辑是：当至少一个复选框被勾选时，隐藏所有不属于任一已勾选分类的行；若全部未勾选，则显示全部行。原代码存在几个关键问题：

• 使用 id=”{{i.media_type}}” 作为行标识，但 jQuery 中 $(‘#i’) 是错误写法（将字符串 “i” 当作 ID），且 ID 不适合用于批量操作；
• $(‘#music_filter’, ‘#video_filter’, …) 的选择器语法错误——逗号在 jQuery 中表示多个独立选择器，而非组合，此处应使用 .on(‘click’, …) 绑定到父容器或统一类名；
• 仅遍历 notChecked 却未映射到对应行，导致无法精准控制显隐。

✅ 正确做法是：

1. 将 id 改为 class（如
   ），因为一类值可能对应多行，而 ID 必须唯一；

2. 为每行添加通用类（如 all-genre）便于统一控制；
3. 监听所有复选框变化，收集已勾选值，再批量切换行可见性。

以下是优化后的完整实现：