本文介绍一种简洁高效的 jquery 方案，通过监听复选框状态变化，动态显示/隐藏对应类名的表格行，支持“全显”与“多选交集”两种逻辑，代码精简且易于扩展。
要实现基于复选框的表格分类过滤，核心在于：根据当前勾选的类别，仅显示具有对应 class 的 以下为推荐实现（兼容现代浏览器及 jQuery 3.x+）： ✅ 关键设计说明： ⚠️ 注意事项： 立即学习“Java免费学习笔记（深入）”； 该方案轻量、可维护性强，稍作调整即可适配更多类别或嵌套结构，是前端表格过滤的经典实践之一。 行，其余全部隐藏。jQuery 提供了简洁而强大的链式操作能力，可一行逻辑完成筛选与 DOM 更新。 $('input[type="checkbox"]').on('change', function() {
// 获取所有已勾选复选框的 value 值（如 'audio', 'video'）
const activeCategories = $('input[type="checkbox"]:checked')
.map((_, el) => $(el).val())
.get();
// 显示所有行（重置状态）
$('table tr').show();
// 若有勾选项，则隐藏不匹配类名的行
if (activeCategories.length > 0) {
$('table tr').filter(function() {
const rowClass = $(this).attr('class');
// 若当前行无 class 或 class 不在勾选列表中，则隐藏
return !rowClass || !activeCategories.includes(rowClass);
}).hide();
}
});
的 class 值严格唯一且与 checkbox 的 value 完全一致（如
对应 ）；
），当前方案因 attr('class') 返回完整字符串（如 "audio video"）而无法匹配，此时建议改用 hasClass() 或正则判断——可升级为：
return !activeCategories.some(cat => $(this).hasClass(cat));
