javascript - 取消选中多个复选框后需要重新显示内容

Question

我有多个复选框来过滤另一个div中的内容，选中一个复选框后，仅显示属于该复选框的内容，其余内容被隐藏，当您选中更多框时，会显示更多内容。

我遇到的问题是，当我取消选中所有框时，所有内容都会消失，而我希望当我取消选中所有框时所有内容都会出现。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="tags">
  <ul class="list-unstyled filterSection">
    <li>
      <label class="filter-check clearfix">
                <input type="checkbox" rel="1" id="1" />
                <label for="1">1</label>
      </label>
    </li>
    <li>
      <label class="filter-check clearfix">
                <input type="checkbox" rel="2" id="2" />
                <label for="2">2</label>
      </label>
    </li>
    <li>
      <label class="filter-check clearfix">
                <input type="checkbox" rel="3" id="3" />
                <label for="3">3</label>
      </label>
    </li>
    <li>
      <label class="filter-check clearfix">
                <input type="checkbox" rel="4" id="4" />
                <label for="4">4</label>
      </label>
    </li>
    <li>
      <label class="filter-check clearfix">
                <input type="checkbox" rel="5" id="5" />
                <label for="5">5</label>
      </label>
    </li>
  </ul>
</div>

<div class="results" id="">
  <div class="1 m-3 border-new border border-dark rounded">
    <a href="">
      <img src="images/1.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="1 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/1.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="2 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/2.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="2 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/2.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="3 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/3.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="5 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/5.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="1 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/1.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="4 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/4.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="1 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/1.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="3 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/3.jpg">
      <div>
      </div>
    </a>
  </div>
  <div class="4 m-3  border-new border border-dark rounded">
    <a href="">
      <img src="images/4.jpg">
      <div>
      </div>
    </a>
  </div>
</div>

Answer 1

首先，不要监听复选框上的click事件；为此有一个专门的 change 事件。如果我使用键盘切换复选框，您的 click 事件将不会触发。

其次，这只是监听找到了多少个选中的复选框，然后采取相应的行动。

$('div.tags').find('input:checkbox').on('change', function() {
    let
    els = $('.results > div').hide(),
    checked = $('div.tags').find('input:checked').each(function() {
        els.filter('.'+$(this).attr('rel')).show();
    });
    if (!checked.length) els.show(); //<-- none checked? Show all
});

另请注意，通过分配 els，我们可以避免在同一选择器上重复查找。