Javascript jQuery使用多个复选框作为过滤器和自定义属性隐藏特定的表行

我试图使用复选框作为过滤器来隐藏特定的表行。我已经搜索了很多不同的示例，比如复选框、css可见性、jquery等等。但是，我没有找到任何适合我的场景的示例，而且我似乎无法根据我找到的示例拼凑出一个定制的解决方案

-选中复选框应删除与复选框值不匹配的任何行。例如，如果我选中“男性”复选框，它应该隐藏没有“性别”值“男性”的行 -取消选中该复选框将使相应的行再次可见 -代码应该能够处理多个复选框。例如，如果我选中“Droid”复选框并选中“Male”复选框，则不会显示任何结果，因为不存在匹配这两个条件的结果

更新：

我把最初的逻辑搞砸了

• 如果未选中任何复选框，则显示所有内容
• 如果选中复选框，则显示该复选框对应的行。重复选中的任何复选框，并显示相应的行。隐藏所有未选中的行
• 如果未选中任何复选框，则显示所有内容

表{边框折叠：折叠；宽度：100%；}
th，td{文本对齐：左；填充：8px；}
tr:n子（偶数）{背景色：#f2f2}
th{背景色：#0099ff；颜色：白色；}
表，th，td{边框：1px纯黑色；}
*{框大小：边框框；}
正文{页边距：0；}
.栏目{
浮动：左；
填充：10px；
高度：300px；/*应移除。仅用于演示*/
}
.左{宽度：75%；}
.右{宽度：25%；}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}

名称
职业
性别
比赛
达斯维达
西斯黑魔王
男性
西斯
波巴·费特
为领取悬赏而情愿充当杀手的人
男性
人类
尤达
绝地大师
男性
不为人知
R2D2
天体机械机器人
非二进制
机器人
过滤器
性别
男性
非二进制
比赛
西斯
人类
不为人知
机器人

执行此类操作的最佳方法是使用一个“更新”函数，确定哪些行应该是可见的，哪些行不应该是可见的，并应用这些样式（这与ReactJS中的工作方式非常接近）。下面是一个如何做到这一点的示例

我已经更改了您的复选框，以便在代码中很容易区分哪些复选框代表种族，哪些复选框代表性别：

<div class="column right">
   <div><b>Filters</b></div>
   <div><b>Gender</b></div>
   <div><input type="checkbox" class="gender" value="male">Male</input></div>
   <div><input type="checkbox" class="gender" value="non-binary">Non-Binary</input></div>
   <div><b>Race</b></div>
   <div><input type="checkbox" class="race" value="sith">Sith</input></div>
   <div><input type="checkbox" class="race" value="human">Human</input></div>
   <div><input type="checkbox" class="race" value="unknown">Unknown</input></div>
   <div><input type="checkbox" class="race" value="droid">Droid</input></div>
</div>

---

最好的方法是使用一个“update”函数来计算哪些行应该可见，哪些行不应该可见，并应用这些样式（这与ReactJS类似）。下面是一个如何做到这一点的示例

我已经更改了您的复选框，以便在代码中很容易区分哪些复选框代表种族，哪些复选框代表性别：

<div class="column right">
   <div><b>Filters</b></div>
   <div><b>Gender</b></div>
   <div><input type="checkbox" class="gender" value="male">Male</input></div>
   <div><input type="checkbox" class="gender" value="non-binary">Non-Binary</input></div>
   <div><b>Race</b></div>
   <div><input type="checkbox" class="race" value="sith">Sith</input></div>
   <div><input type="checkbox" class="race" value="human">Human</input></div>
   <div><input type="checkbox" class="race" value="unknown">Unknown</input></div>
   <div><input type="checkbox" class="race" value="droid">Droid</input></div>
</div>

---

Duncan Thacker的回答相当准确地描述了一般方法，但由于我已经完成了我的工作示例，现在开始。。。 我还认为，我的方法更容易掌握，每个过滤器的函数也不太臃肿，但它可能过于简单，需要扩展，这取决于您将来可能拥有哪些过滤器机制，可以超越这个简单的代码示例

var tableRows=$（'.column.left tbody tr'），
FilterBox=$（'.column.right:checkbox'）。打开（'change'，filterTable）；
函数filterTable（）{
变量过滤器_选择器=“”；
$（'.column.right:选中'）。每个（函数（）{
筛选器_选择器+='['+$（this.attr（'name'）+'='+'“+$（this.val（）+'”）；
});
如果（过滤器长度<1）{
tableRows.show（）；
}否则{
tableRows.hide（）.filter（filter_selector.show（）；
}
}

表{边框折叠：折叠；宽度：100%；}
th，td{文本对齐：左；填充：8px；}
tr:n子（偶数）{背景色：#f2f2}
th{背景色：#0099ff；颜色：白色；}
表，th，td{边框：1px纯黑色；}
*{框大小：边框框；}
正文{页边距：0；}
.栏目{
浮动：左；
填充：10px；
高度：300px；/*应移除。仅用于演示*/
}
.左{宽度：75%；}
.右{宽度：25%；}
.罗：之后{
内容：“；
显示：表格；
明确：两者皆有；
}

名称
职业
性别
比赛
达斯维达
西斯黑魔王
男性
西斯
波巴·费特
为领取悬赏而情愿充当杀手的人
男性
人类
尤达
绝地大师
男性
不为人知
R2D2
天体机械机器人
非二进制
机器人
过滤器
性别
男性
非二进制
比赛
西斯
人类
不为人知
机器人

Duncan Thacker的回答非常准确地描述了一般方法，但由于我已经完成了我的工作示例，现在开始。。。 我还认为，我的方法更容易掌握，每个过滤器的函数也不太臃肿，但它可能过于简单，需要扩展，这取决于您将来可能拥有哪些过滤器机制，可以超越这个简单的代码示例

var tableRows=$（'.column.left tbody tr'），
FilterBox=$（'.column.right:checkbox'）。打开（'change'，filterTable）；
函数filterTable（）{
变量过滤器_选择器=“”；
$（'.column.right:选中'）。每个（函数（）{
筛选器_选择器+='['+$（this.attr（'name'）+'='+'“+$（this.val（）+'”）；
});
如果（过滤器长度<1）{
tableRows.show（）；
}否则{
tableRows.hide（）.filter（filter_selector.show（）；
}
}

表{边框折叠：折叠；宽度：100%；}
th，td{文本对齐：左；填充：8px；}
tr:n子（偶数）{背景色：#f2f2}
th{背景色：#0099ff；颜色：白色；}
表，th，td{边框：1px纯黑色；}
*{框大小：边框框；}
正文{页边距：0；}
.栏目{
浮动：左；
填充：10px；
高度：300px；/*应移除。仅用于演示*/
}
.左{宽度：75%；}
.对{