带有多个Checkbox的jQuery过滤器

Question

我们有一个多重复选框过滤器：

Image from Checkbox Filter

DIV容器有几个类，根据分配的类别，必须始终至少检查一个类，以便显示它们。但在加载页面时应该全部显示。

不幸的是，我的脚本无法正常运行，希望你能帮助我。

祝你好运

＆＃13;

＆＃13;

$(".filter-menu :checkbox").click(function () {

	$(".grid-sort-container").fadeOut();

	if ($(this).not(':checked')) {
		$("." + $(this).val()).fadeOut();
	}

	$(".filter-menu :checkbox:checked").each(function () {
		$("." + $(this).val()).fadeIn();
	});

	$(".grid-sort-container").fadeIn();
});

＆＃13;

.grid-sort-container {
padding: 20px 0;
}

.grid-entry {
height:20px;
width: 20px;
display: inline-block;
margin: 0 10px;
background-color: #CCCCCC;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="filter-menu">
      <h4>Branche / Industrie</h4>
      <div>
        <input type="checkbox" value="bau-bergbau_sort" id="filter-bau-bergbau_sort">
          <label for="filter-bau-bergbau_sort"> Bau &amp; Bergbau</label>
        </div>
      <div>
        <input type="checkbox" value="energie-und-umwelt_sort" id="filter-energie-und-umwelt_sort">
        <label for="filter-energie-und-umwelt_sort"> Energie &amp; Umwelt</label>
      </div>
      <div>
        <input type="checkbox" value="finanzwesen_sort" id="filter-finanzwesen_sort">
        <label for="filter-finanzwesen_sort"> Finanzwesen</label>
      </div>
      <div>
        <input type="checkbox" value="oeffentlicher-sektor-non-profit_sort" id="filter-oeffentlicher-sektor-non-profit_sort">
        <label for="filter-oeffentlicher-sektor-non-profit_sort"> Öffentlicher Sektor &amp; Non-Profit</label>
      </div>
      <div>
        <input type="checkbox" value="gesundheit-pharma-biotechnologie_sort" id="filter-gesundheit-pharma-biotechnologie_sort">
        <label for="filter-gesundheit-pharma-biotechnologie_sort"> Gesundheit, Pharma &amp; Biotechnologie</label>
      </div>
      <div>
        <input type="checkbox" value="fertigung-elektronik_sort" id="filter-fertigung-elektronik_sort">
        <label for="filter-fertigung-elektronik_sort"> Fertigung &amp; Elektronik</label>
      </div>
      <div>
        <input type="checkbox" value="dienstleistungen_sort" id="filter-dienstleistungen_sort">
        <label for="filter-dienstleistungen_sort"> Dienstleistungen</label>
      </div>
    </div>

    <div class="grid-sort-container">
      <div class="grid-entry all_sort fertigung-elektronik_sort operations-management_sort"></div>
      <div class="grid-entry all_sort dienstleistungen_sort operations-management_sort"></div>
      <div class="grid-entry all_sort fertigung-elektronik_sort gesundheit-pharma-biotechnologie_sort"></div>
      <div class="grid-entry all_sort fertigung-elektronik_sort finanzwesen_sort"></div>
      <div class="grid-entry all_sort energie-und-umwelt_sort bau-bergbau_sort"></div>
      <div class="grid-entry all_sort oeffentlicher-sektor-non-profit_sort operations-management_sort"></div>
    </div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用循环并逐一检查：

$(".filter-menu :checkbox").change(function() {
  $(".grid-sort-container").fadeOut();

  $('.filter-menu input:checkbox').each(function() {

    if ($(this).is(':checked')) {
      //console.log($(this).val());
      $("." + $(this).val()).fadeIn();
    } else {
      $("." + $(this).val()).fadeOut();
    }
  });


  $(".grid-sort-container").fadeIn();
});

.grid-sort-container {
  padding: 20px 0;
}

.grid-entry {
  height: 20px;
  width: 20px;
  display: inline-block;
  margin: 0 10px;
  background-color: #CCCCCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="filter-menu">
  <h4>Branche / Industrie</h4>
  <div>
    <input type="checkbox" value="bau-bergbau_sort" id="filter-bau-bergbau_sort">
    <label for="filter-bau-bergbau_sort"> Bau &amp; Bergbau</label>
  </div>
  <div>
    <input type="checkbox" value="energie-und-umwelt_sort" id="filter-energie-und-umwelt_sort">
    <label for="filter-energie-und-umwelt_sort"> Energie &amp; Umwelt</label>
  </div>
  <div>
    <input type="checkbox" value="finanzwesen_sort" id="filter-finanzwesen_sort">
    <label for="filter-finanzwesen_sort"> Finanzwesen</label>
  </div>
  <div>
    <input type="checkbox" value="oeffentlicher-sektor-non-profit_sort" id="filter-oeffentlicher-sektor-non-profit_sort">
    <label for="filter-oeffentlicher-sektor-non-profit_sort"> Öffentlicher Sektor &amp; Non-Profit</label>
  </div>
  <div>
    <input type="checkbox" value="gesundheit-pharma-biotechnologie_sort" id="filter-gesundheit-pharma-biotechnologie_sort">
    <label for="filter-gesundheit-pharma-biotechnologie_sort"> Gesundheit, Pharma &amp; Biotechnologie</label>
  </div>
  <div>
    <input type="checkbox" value="fertigung-elektronik_sort" id="filter-fertigung-elektronik_sort">
    <label for="filter-fertigung-elektronik_sort"> Fertigung &amp; Elektronik</label>
  </div>
  <div>
    <input type="checkbox" value="dienstleistungen_sort" id="filter-dienstleistungen_sort">
    <label for="filter-dienstleistungen_sort"> Dienstleistungen</label>
  </div>
</div>

<div class="grid-sort-container">
  <div class="grid-entry all_sort fertigung-elektronik_sort operations-management_sort"></div>
  <div class="grid-entry all_sort dienstleistungen_sort operations-management_sort"></div>
  <div class="grid-entry all_sort fertigung-elektronik_sort gesundheit-pharma-biotechnologie_sort"></div>
  <div class="grid-entry all_sort fertigung-elektronik_sort finanzwesen_sort"></div>
  <div class="grid-entry all_sort energie-und-umwelt_sort bau-bergbau_sort"></div>
  <div class="grid-entry all_sort oeffentlicher-sektor-non-profit_sort operations-management_sort"></div>
</div>