本文介绍一种简洁高效的 jquery 方案，通过监听复选框状态变化，动态显示/隐藏对应类名的表格行，支持“全显”与“多选交集”两种逻辑，代码精简且易于扩展。

要实现基于复选框的表格分类过滤，核心在于：根据当前勾选的类别，仅显示具有对应 class 的 行，其余全部隐藏。jQuery 提供了简洁而强大的链式操作能力，可一行逻辑完成筛选与 DOM 更新。

以下为推荐实现（兼容现代浏览器及 jQuery 3.x+）：

$('input[type="checkbox"]').on('change', function() {
  // 获取所有已勾选复选框的 value 值（如 'audio', 'video'）
  const activeCategories = $('input[type="checkbox"]:checked')
    .map((_, el) => $(el).val())
    .get();

  // 显示所有行（重置状态）
  $('table tr').show();

  // 若有勾选项，则隐藏不匹配类名的行
  if (activeCategories.length > 0) {
    $('table tr').filter(function() {
      const rowClass = $(this).attr('class');
      // 若当前行无 class 或 class 不在勾选列表中，则隐藏
      return !rowClass || !activeCategories.includes(rowClass);
    }).hide();
  }
});

✅ 关键设计说明：

• 使用 change 事件替代 click，避免因键盘操作（空格切换）导致逻辑遗漏；
• 先 show() 全部再按条件 hide()，确保状态始终确定，避免累积隐藏错误；
• .filter() 配合 includes() 实现语义清晰的白名单匹配，比遍历 notchecked 更直观可靠；
• 支持无勾选时自动显示全部（activeCategories.length === 0 分支隐含此行为），符合需求第 1 条。

⚠️ 注意事项：

Java 接口排错助手

在调试 Java 后端 API 故障时使用此技能，尤其适用于以下任务：分析日志、跨 Controller、Service 和 Mapper 层追踪请求、定位异常根因、检查 SQL 执行或参数流转，以及生成简洁的诊断结论与修复方案。

下载

立即学习“Java免费学习笔记（深入）”；

• 确保每个 的 class 值严格唯一且与 checkbox 的 value 完全一致（如 对应 ）；
• 若单行属于多个类别（如 ），当前方案因 attr('class') 返回完整字符串（如 "audio video"）而无法匹配，此时建议改用 hasClass() 或正则判断——可升级为：

  return !activeCategories.some(cat => $(this).hasClass(cat));

• 生产环境建议为过滤器添加防抖（debounce），避免高频触发影响性能（尤其数据量大时）。

该方案轻量、可维护性强，稍作调整即可适配更多类别或嵌套结构，是前端表格过滤的经典实践之一。