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="http://ift.tt/1qRgvOJ"></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 & 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 & 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 & 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 & Biotechnologie</label>
</div>
<div>
<input type="checkbox" value="fertigung-elektronik_sort" id="filter-fertigung-elektronik_sort">
<label for="filter-fertigung-elektronik_sort"> Fertigung & 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>
Aucun commentaire:
Enregistrer un commentaire