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>

如果是，请接受答案

取消选中多个复选框后，需要内容重新出现

2 个答案: