如何添加到我的表格filter以允许多个复选框选择，以及从下拉列表中过滤？

我有一个表可以通过多个复选框以及“选择”下拉列表进行过滤。 基本上，我希望能够做的是点击多个复选框，以便找到包含该类的每一行，所以类1和3或示例，然后按位置过滤它。

我已经非常接近这一点，在这里我可以选择位置（也是一个类，两个字母用于州缩写），以及复选框中的单个类，但我希望人们能够比较多个类从复选框。

问题是我理解的，但似乎无法弄清楚如何解决。 代码将每个类添加到“tr”的末尾。 这意味着如果您从复选框中应用2个filter，它什么也找不到，而不是从每个filter中找到所有内容。 虽然这个行为对于1个复选框和Dropdown非常有用，这意味着它只会给我Tennessee的Filter 1值，我希望它能够同时给我Filter 2，Filter 3和Filter 4，如果我所以选择。

有关如何更改此选项以使其允许多个复选框选择的任何想法？

顺便说一下，我可以使用的JavaScript / jQuery插件非常有限，这就是为什么我很难使用tableSorter这个解决方案。

我的HTML：

 Filter 1 Filter 2 Filter 3 Filter 4  --Choose State-- Tennessee Missouri Nevada Iowa State 
 
 
 
 
 
 
 
City, Tennessee
 
 
 
 
Active
 
 
  

JavaScript的：

  $("input[name='filterStatus'], select.filter").change(function () { var classes = ""; var stateClass = "" $("input[name='filterStatus']").each(function() { if ($(this).is(":checked")) { classes += "." + $(this).val(); } }); $("select.filter").each(function() { if ($(this).val() != 'ZZ') { stateClass += "." + $(this).val(); } }); if (classes == "" && stateClass == "") { // if no filters selected, show all items $("#StatusTable tbody tr").show(); } else { // otherwise, hide everything... $("#StatusTable tbody tr").hide(); // then show only the matching items rows = $("#StatusTable tr" + classes + stateClass); if (rows.size() > 0) { rows.show(); } } }); 

Answer 1

既然你知道这个问题，那么就跳过解释并跳转到解决方案。

使用与数组混合的.filter()方法。

将类名称推送到数组中，而不是消耗字符串：

 var classes = []; $("input[name='filterStatus']").each(function() { if ($(this).is(":checked")) { classes.push('.'+$(this).val()); } }); 

然后在选择行时，使用.filter()就像这样：

 rows = $("#StatusTable tr" + stateClass).filter(classes.length ? classes.join(',') : '*') 

一切正常！

小提琴