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

本文介绍在 django 前端中使用 jquery 实现「仅显示被勾选分类对应表格行」的交互逻辑：当多个复选框存在时，自动隐藏所有未被勾选分类（如 `audio`/`video`）所对应的 `

要实现「仅保留勾选分类对应行」的效果，核心思路是：将筛选逻辑从“排除未勾选项”转为“显式展示已勾选项”——这更直观、易维护，也避免了原代码中 $(‘#i’).toggle() 这类无效选择器和逻辑倒置的问题。

✅ 正确实现步骤

1. 修改 HTML 结构：用 class 替代 id，并添加统一标识

由于一个

  
    {{ some data }}
    {{ some other data }}
  

确保 i.media_type 输出值为 music、video、writing 或 games（与复选框 value 严格一致）。

2. 优化 JavaScript / jQuery 逻辑

以下代码在任一复选框状态变更时触发，精准控制行显隐：