如何用 jQuery 实现基于复选框的表格多类别动态过滤

本文介绍一种简洁高效的 jquery 方案，通过监听复选框状态变化，动态显示/隐藏对应类名的表格行，支持全显、单选、多选及取消选择后的自动恢复，无需手动维护状态变量。

在前端数据展示场景中，常需对表格内容按分类进行交互式筛选。本教程提供一个轻量、健壮且语义清晰的 jQuery 过滤方案——利用复选框值（如 "audio"）与表格行的 class 属性（如

✅ 核心逻辑说明

• 每次任一复选框被点击时，收集所有已勾选复选框的 value 值，构成一个白名单数组（如 ["audio", "video"]）；
• 遍历所有 元素，若其 class 属性值不在白名单中，则隐藏该行；
• 若无任何复选框被勾选（白名单为空数组），.filter(...).hide() 不匹配任何元素，所有行自然保持可见——完美满足“全显”需求，无需额外 show() 调用。

? 推荐实现代码（jQuery 3.0+）

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

  // 隐藏所有 class 不在 activeCategories 中的 
  $('table tr').filter(function() {
    const rowClass = $(this).attr('class');
    return rowClass && !activeCategories.includes(rowClass);
  }).hide();

  // 显示所有匹配 activeCategories 的行（确保切换时旧隐藏行被正确恢复）
  if (activeCategories.length > 0) {
    activeCategories.forEach(category => {
      $(`table tr.${category}`).show();
    });
  }
});

⚠️ 关键注意事项 表格行的 class 必须严格等于复选框的 value（如 对应 ），不支持多类名（如 class="audio featured"）。若需支持多类，可改用 $(this).hasClass(category) 替代 === 判断。 建议为复选框添加 name 属性（如 name="category-filter"）并使用更精确的选择器 $('input[name="category-filter"]')，避免误绑其他页面 checkbox。 如需兼容无 JS 环境，应在 HTML 中默认显示全部数据（即不设初始 display: none），保障渐进增强。

✅ 效果验证示例

和 可见

操作	显示行
全未勾选	audio, video, writing, game 全部可见
仅勾选 audio 和 game	仅
取消勾选 audio	自动隐藏 audio 行，其余保持可见

该方案代码简短（核心逻辑仅 6 行）、可读性强、无副作用，且天然支持任意数量的分类扩展——只需同步增删复选框与对应行 class 即可，是生产环境中值得复用的标准过滤模式。


SPLASH
将音乐制作的乐趣带给每个人。
下载