本文介绍一种简洁高效的 jquery 表格动态筛选方案：通过监听复选框状态变化，自动显示/隐藏对应类名的表格行，支持全显（无勾选时）与多选组合过滤，代码精简且逻辑清晰。
要实现“勾选即显示、未勾选即隐藏”的自适应表格筛选，核心在于：动态收集所有已勾选复选框的 value 值，再匹配 该方案逻辑清晰、扩展性强，稍作调整即可适配更多筛选维度或动态加载场景。 元素的 class 属性，仅保留匹配项，其余统一隐藏。以下为完整、健壮的实现方案： ✅ 推荐实现（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();
}
});? 关键说明
的 class 字符串（如 "audio"），与 checkbox 的 value 严格对应——要求 HTML 中每个
仅有一个类别 class，且与 checkbox 的 value 完全一致；
），上述逻辑将失效；此时应改用 $(this).hasClass(...) 或正则匹配，但推荐保持结构简洁，单 class 管理更可控。
⚠️ 注意事项
包裹，避免误操作其他页面
；
if ($('table tr:visible').length === 0) {
$('table').append('暂无匹配内容
