本文介绍一种简洁高效的 jquery 表格动态筛选方案：通过监听复选框状态变化，自动显示/隐藏对应类名的表格行，支持全显（无勾选时）与多选组合过滤，代码精简且逻辑清晰。

要实现“勾选即显示、未勾选即隐藏”的自适应表格筛选，核心在于：动态收集所有已勾选复选框的 value 值，再匹配 <tr> 元素的 class 属性，仅保留匹配项，其余统一隐藏。以下为完整、健壮的实现方案：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

✅ 推荐实现（jQuery，简洁可靠）

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

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

  // 若有至少一个勾选，则隐藏不匹配的行
  if (activeFilters.length > 0) {
    $('table tr').filter(function() {
      const rowClass = $(this).attr('class');
      // 若当前行 class 不在 activeFilters 中，则隐藏
      return !activeFilters.includes(rowClass);
    }).hide();
  }
});

? 关键说明

• 使用 change 事件而非 click，更准确响应用户操作（兼容键盘操作、无障碍访问）；
• 先 show() 全部再按需 hide()，避免因多次点击导致状态累积错误；
• $(this).attr('class') 直接获取 <tr> 的 class 字符串（如 "audio"），与 checkbox 的 value 严格对应——要求 HTML 中每个 <tr> 仅有一个类别 class，且与 checkbox 的 value 完全一致；
• 若某行含多个 class（如 <tr class="audio featured">），上述逻辑将失效；此时应改用 $(this).hasClass(...) 或正则匹配，但推荐保持结构简洁，单 class 管理更可控。

⚠️ 注意事项

• 确保 jQuery 已正确引入（建议 3.6+）；
• 表格需有明确 <table> 包裹，避免误操作其他页面 <tr>；
• 如需支持「无数据时显示提示」，可在筛选后追加：

  if ($('table tr:visible').length === 0) {
    $('table').append('<tr class="no-results"><td colspan="100%">暂无匹配内容</td></tr>');
  } else {
    $('table tr.no-results').remove();
  }

该方案逻辑清晰、扩展性强，稍作调整即可适配更多筛选维度或动态加载场景。