本文介绍一种简洁高效的 jquery 方法，通过监听复选框状态变化，动态显示/隐藏对应类名的表格行，满足“全显（无勾选）”与“仅显已勾选项”两类核心交互逻辑。
要实现一个响应式、语义清晰且健壮的表格分类过滤功能，关键在于：准确捕获当前勾选的类别标识，并据此控制 该方案以最少代码达成清晰逻辑：“勾什么，留什么；不勾，全留”。它结构清晰、易于维护，并具备良好的扩展性——如新增类别，只需同步添加 checkbox 和对应 元素的可见性。下面提供完整可运行的解决方案，并附关键说明。 ✅ 推荐实现（简洁、可扩展、语义明确）
$('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();
}
});? 工作原理说明
⚠️ 注意事项与最佳实践
），避免全局 $('table tr') 意外影响其他表格；
仅含一个语义类（如
），避免 class="audio featured" 导致 attr('class') 返回多值字符串而匹配失败；若需多类支持，应改用 $(this).hasClass(...) 或正则解析；
✅ 总结
即可，无需修改脚本逻辑。
