本文介绍一种简洁高效的 jquery 方法，通过监听复选框状态变化，动态显示/隐藏对应类名的表格行，满足“全显（无勾选）”与“仅显已勾选项”两类核心交互逻辑。

htmlppt.skill

把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。

下载

要实现一个响应式、语义清晰且健壮的表格分类过滤功能，关键在于：准确捕获当前勾选的类别标识，并据此控制 元素的可见性。下面提供完整可运行的解决方案，并附关键说明。

✅ 推荐实现（简洁、可扩展、语义明确）

$('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）确保兼容键盘操作（如空格切换）及程序化触发；
• $('input:checked').map(...).get() 构建一个纯字符串数组（如 ['audio', 'video']），便于后续判断；
• 先统一 show() 所有行，再按需 hide() —— 避免因多次点击导致状态残留；
• filter() 遍历每行，通过 $(this).attr('class') 获取其唯一类别标识（此处假设每行仅有一个 class，且与 checkbox 的 value 完全一致）；
• 若 activeFilters 为空（即无勾选），则跳过 filter().hide()，自然保留全部显示 —— 完美契合需求第 1 条。

⚠️ 注意事项与最佳实践

• HTML 结构建议：为表格添加明确 id 或 class（如 ），避免全局 $('table tr') 意外影响其他表格；
  类名唯一性：确保每个
  仅含一个语义类（如 ），避免 class="audio featured" 导致 attr('class') 返回多值字符串而匹配失败；若需多类支持，应改用 $(this).hasClass(...) 或正则解析；
  性能优化（大数据量）：当行数超百时，可添加 debounce 防抖，或改用 CSS 类控制（如 .filtered-out { display: none; }）提升渲染效率；
  无障碍增强：为复选框添加 关联，提升可访问性：

  <input type="checkbox" value="audio" id="music_filter">
  <label for="music_filter">音频内容</label>

  ✅ 总结

  该方案以最少代码达成清晰逻辑：“勾什么，留什么；不勾，全留”。它结构清晰、易于维护，并具备良好的扩展性——如新增类别，只需同步添加 checkbox 和对应

  即可，无需修改脚本逻辑。