如何使用 jQuery 动态显示/隐藏表格行（基于多选过滤器）-js教程

本文介绍如何通过 jquery 实现基于多个复选框的表格行动态过滤：仅显示被至少一个已勾选复选框所对应类名的行，未勾选的类别将自动隐藏其关联行，且支持全不勾选时显示全部。

在 Django 前端中实现交互式表格过滤时，直接操作 id 属性进行批量显隐存在局限性（如 ID 必须唯一、无法高效匹配多条件），更健壮的做法是统一使用语义化 class 名管理行类型，并结合 jQuery 的选择器逻辑完成实时过滤。

✅ 正确的 HTML 结构改造

首先，将

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

同时确保复选框 value 与媒体类型完全一致（注意大小写和拼写）：

  
  Audio

  
  Video

  
  Writing

  
  Games

⚠️ 注意：原问题中 checkbox value=”music” 但行 ID 是 “audio”，二者需严格一致（推荐统一用 audio/video/writing/games）。Django 模板中 {{ i.media_type }} 应输出这些标准值。

✅ 核心 jQuery 过滤逻辑（修复版）

以下代码实现了你描述的业务逻辑：