jQuery Filter with multiple Checkboxes

Question

we have a Multiple Checkbox Filter:

The DIV containers have several classes, depending on the assigned category, there must always be at least one class checked so that they are displayed. But on loading the page should be all displayed.

Unfortunately, my script does not work properly, hope you can help me.

Best regards

$(".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();
});

.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>

what is the check you are doing on load? on click is there but what do u want to do on load? — Nadeemmnn Mohd
– Nadeemmnn Mohd, Commented Jul 4, 2017 at 7:41
Hi, thx for your comment. All checkboxes are not checked. So all are displayed. Currently, the jQuery function is available individually without $ (document) — CellePelle
– CellePelle, Commented Jul 4, 2017 at 7:45
At the beginning everything is displayed within <div class = "grid-sort-container"> </ div>. After clicking on a checkbox, only the content that has the class of the checkbox should be displayed. But if several checkboxes are activated, all the contents that have the class assignments from the checkboxes should be displayed. All inside of <div class = "grid-sort-container"> </ div> I can not edit. But the filter including the jQuery code I can edit. — CellePelle
– CellePelle, Commented Jul 4, 2017 at 8:04

Govind Samrow · Accepted Answer · 2017-07-04 09:09:41Z

1

Use loop and check one by one:

$(".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>

edited Jul 4, 2017 at 9:09

answered Jul 4, 2017 at 8:20

Govind Samrow

10.2k14 gold badges59 silver badges90 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

CellePelle Over a year ago

Hello, thank you for your answer. I have tested it, unfortunately this does not work properly, since we have several classes that are within the same <div>. This is unfortunately my problem :(

CellePelle Over a year ago

Ok, this is good, i cant use them not by all_sort (Show All) and eu_sort (only EU). Why? ^^

CellePelle Over a year ago

I have use: console.log("IN: " + $(this).val()); and console.log("OUT: " + $(this).val()); I see, eu_sort checked fadeIN is before others fadeOUT. Here is the log: OUT: all_sort OUT: weltweit_sort IN: eu_sort OUT: bau-bergbau_sort OUT: energie-und-umwelt_sort OUT: finanzwesen_sort OUT: oeffentlicher-sektor-non-profit_sort OUT: gesundheit-pharma-biotechnologie_sort OUT: fertigung-elektronik_sort OUT: dienstleistungen_sort

Collectives™ on Stack Overflow

jQuery Filter with multiple Checkboxes

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related