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

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，我们可以避免在同一选择器上重复查找。

Answer 2

这就是你要找的吗？

​

$(document).ready(function () {
        const tags = $('div.tags');
        const checkboxes = tags.find('input:checkbox');
        const results = $('.results');
        const resultsDiv = results.find('div');
        checkboxes.on('change', function () {
            if (checkboxes.get().some(item => item.checked)) {
              resultsDiv.hide();
            } else {
              resultsDiv.show();
            }
            $('div.tags').find('input:checked').each(function () {
                $('.results > div.' + $(this).attr('rel')).show();
            });
        });
    }); 

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<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>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
</div>
</body>
</html>

​

如果是，请接受回答