jQuery 复选框过滤器 - 从 OR 到 AND答案

【问题标题】：jQuery Checkbox Filters - From OR to ANDjQuery 复选框过滤器 - 从 OR 到 AND
【发布时间】：2015-01-15 09:43:50
【问题描述】：

希望有人能帮助我指明正确的方向。我一直在玩一些我在 SO 上找到的代码，但我对 javascript 部分的工作原理有点困惑。

目前，如果您选中超过 1 个复选框，它将选择所有匹配的结果。我想让它只有在两个复选框都为真时才匹配，当它是一个或另一个时不列出所有。

Java

$(document).ready(function () {
            $('.results > li.' + $(this).attr('rel')).show();

            $('div.tags').find('input:checkbox').live('click', function () {
                $('.results > li').hide();
                $('div.tags').find('input:checked').each(function () {
                    $('.results > li.' + $(this).attr('rel')).show();
                });
            });
        });

HTML

<div class="tags">
    <label><input type="checkbox" rel="PVC" />PVC</label>
    <label><input type="checkbox" rel="316SS" />316SS</label>
    <label><input type="checkbox" rel="PVDF" />PVDF</label>
    <label><input type="checkbox" rel="Other" />Other</label>
</div>

<ul class="results">
    <li class="PVC">Result 1 (PVC Only)</li>
    <li class="316SS">Result 2 (316SS Only)</li>
    <li class="PVDF">Result 3 (PVDF Only)</li>
    <li class="Other">Result 4 (Other Only)</li>
    <li class="PVC PVDF">Result 5 (PVC & PVDF)</li>
    <li class="316SS PVDF">Result 6 (316SS & PVDF)</li>
    <li class="PVDF Other">Result 7 (PVDF & Other)</li>
    <li class="PVC 316SS PVDF Other">Result 8 (All Classes)</li>
</ul>

JSFiddle

所以从我的 JSFiddle 中，你可以看到如果你检查 PVC 和 PVDF，PVC 的所有结果都会出现，PVDF 的所有结果也是如此。在检查2个或更多盒时，我希望它仅匹配其同类中 pvc＆pvdf的结果，而不是另一个或另一个。希望这是有道理的？

【问题讨论】：

标签： jquery checkbox filter

【解决方案1】：

你可以像使用 .filter() 一样

$(document).ready(function() {
  var $checks = $('div.tags input:checkbox').on('change', function() {
    var $results = $('.results > li').hide();
    $checks.filter(':checked').each(function() {
      $results = $results.filter('.' + $(this).attr('rel'))
    });
    $results.show();
  });

  //set the initial display state
  $checks.eq(0).change();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tags">
  <label><input type="checkbox" rel="PVC" />PVC</label>
  <label><input type="checkbox" rel="316SS" />316SS</label>
  <label><input type="checkbox" rel="PVDF" />PVDF</label>
  <label><input type="checkbox" rel="Other" />Other</label>
</div>
<ul class="results">
  <li class="PVC">Result 1 (PVC Only)</li>
  <li class="316SS">Result 2 (316SS Only)</li>
  <li class="PVDF">Result 3 (PVDF Only)</li>
  <li class="Other">Result 4 (Other Only)</li>
  <li class="PVC PVDF">Result 5 (PVC & PVDF)</li>
  <li class="316SS PVDF">Result 6 (316SS & PVDF)</li>
  <li class="PVDF Other">Result 7 (PVDF & Other)</li>
  <li class="PVC 316SS PVDF Other">Result 8 (All Classes)</li>
</ul>

【讨论】：