Javascript 使用复选框按类筛选div

我目前正在用复选框过滤一堆div

<ul id="filters">
    <li>
        <table id="filters_opt" width="100%" border="0" cellspacing="0" cellpadding="0">
  <tr>
        <td><input type="checkbox" checked value="Familien" id="filter-Familien" />
        <label for="filter-Familien">Familien/Kinder</label></td>

        <td><input type="checkbox" checked value="Jugend" id="filter-Jugend" />
        <label for="filter-Jugend">Jugend</label></td>

        <td><input type="checkbox" checked value="Senioren" id="filter-Senioren" />
        <label for="filter-Senioren">Senioren</label></td>

        <td><input type="checkbox" checked value="Musik" id="filter-Musik" />
        <label for="filter-Musik">Musik</label></td>
        <td rowspan="3" align="center" id="filter_anwenden_big"><input type="button" class="send_button" value="Filter anwenden"></td>
       <tr>
</table>   
    </li>
</ul>



$("#filters :checkbox:checked").each(function() {

   $("." + $(this).val()).show();

});

家庭/金德
酒鬼
老年人
音乐


$（“#过滤器：复选框：选中”）。每个（函数（）{
$（“+$（this.val（））.show（）；
});

到目前为止，这显示了所有的div以及复选框选择的类。但我似乎无法理解以下几点：

当我有这些条件时： 甲级 B类 或a+B+C类的组合

结果不应该变小吗？它似乎总是显示A类的所有div、B类的所有div和C类的所有div。但我希望只显示包含A+B类的div，而不是分别显示A和B类的div

我的同事们有什么想法吗

-这是一个有效的例子。如果我查看“Erwachsene”和“Flingern”，它不应该显示“only Flingern”示例，也不应该显示“Senioren-Flingern-Dueseltal”示例

我试图实现的是，我激活的复选框越多，结果就会越小，直到只剩下很少的结果

我现在的代码显示的结果太多了。因为它显示了所有类别为“Flingern”的div，以及所有类别为“Erwachsene”的div

---

希望这能让它更清晰。

您可以这样更改选择器查询：

    $(".send_button").click(function() {

      $(".filter").hide();

      var classes = ['.filter'];

      $("#filters :checkbox:checked").each(function() {
               classes.push($(this).val());
           });

      $(classes.join('.')).show();

      return false;
   });

---

更新的Fiddle:

您能否在问题中加入

html

，并创建一个堆栈片段来演示问题？看，这取决于你的复选框的值。谢谢你的快速回复，我对这个相当陌生。我加入了一些html。我要试着做一个片段！我不完全理解你的意思（stacksnippet会有帮助！），但如果有帮助，

$（“.a.b”）

会选择两个类都有的东西，而

$（“.a.b”）

（带空格）会选择两个类都有的东西。你需要在点击按钮时附加一个函数

$（'.send_按钮'）。点击（function（）{$(“#过滤器：复选框：选中”）.each（function（）{$（“+$（this.val（））.show（）；}）

噢，这太完美了！非常感谢！如果它解决了您的问题，请将其标记为正确答案。谢谢