Skip to content

Instantly share code, notes, and snippets.

@jjcatulle

jjcatulle/checkbox-multi-filter.markdown

Created June 4, 2022 21:33
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save jjcatulle/67d08f3ae2e5a8c738e5307c8b099bb9 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save jjcatulle/67d08f3ae2e5a8c738e5307c8b099bb9 to your computer and use it in GitHub Desktop.
Download ZIP
Checkbox Multi Filter
Raw
index.html
<div class="flowers-wrap">
<p><strong>Filter flowers by colour:</strong></p>
<form>
<label><input type="checkbox" name="fl-colour" value="red" id="red" /> Red</label><br>
<label><input type="checkbox" name="fl-colour" value="yellow" id="yellow" /> Yellow</label><br>
<label><input type="checkbox" name="fl-colour" value="pink" id="pink" /> Pink</label><br>
<label><input type="checkbox" name="fl-colour" value="purple" id="purple" /> Purple</label><br>
<label><input type="checkbox" name="fl-colour" value="green" id="green" /> Green</label><br>
<label><input type="checkbox" name="fl-colour" value="other" id="other" /> Other</label>
</form>
<p><strong>Filter flowers by size:</strong></p>
<form>
<label><input type="checkbox" name="fl-size" value="tiny" id="tiny" /> Tiny</label><br>
<label><input type="checkbox" name="fl-size" value="small" id="small" /> Small</label><br>
<label><input type="checkbox" name="fl-size" value="medium" id="medium" /> Medium</label><br>
<label><input type="checkbox" name="fl-size" value="large" id="large" /> Large</label><br>
<label><input type="checkbox" name="fl-size" value="giant" id="giant" /> Giant</label>
</form>
<p><strong>Filter flowers by continents:</strong></p>
<form>
<div><input type="checkbox" name="fl-cont" value="africa" id="africa" /> Africa </div>
<div><input type="checkbox" name="fl-cont" value="europe" id="europe" />
Europe</div>
<div><input type="checkbox" name="fl-cont" value="asia" id="asia" />
Asia</div>
<div><input type="checkbox" name="fl-cont" value="north-america" id="north-america" />
North America</div>
<div><input type="checkbox" name="fl-cont" value="south-america" id="south-america" />
South America </div>
<label><input type="checkbox" name="fl-cont" value="antarctica" id="antarctica" />
Antarctica</label>
<div><input type="checkbox" name="fl-cont" value="australasia" id="australasia" />
Australasia</div>
</form>
</div>
<div class="flowers">
<div class="flower" data-id="aloe" data-category="green small medium africa">Aloe</div>
<div class="flower" data-id="lavendar" data-category="purple green medium africa europe">Lavender</div>
<div class="flower" data-id="stinging-nettle" data-category="green large africa europe asia">Stinging Nettle</div>
<div class="flower" data-id="gorse" data-category="green yellow large europe">Gorse</div>
<div class="flower" data-id="hemp" data-category="green large asia">Hemp</div>
<div class="flower" data-id="titan-arum" data-category="purple other giant asia">Titan Arum</div>
<div class="flower" data-id="golden-wattle" data-category="green yellow large australasia">Golden Wattle</div>
<div class="flower" data-id="purple-prairie-clover" data-category="purple green other medium north-america">Purple Prairie Clover</div>
<div class="flower" data-id="camellia" data-category="pink other large north-america">Camellia</div>
<div class="flower" data-id="scarlet-carnation" data-category="red medium north-america">Scarlet Carnation</div>
<div class="flower" data-id="indian-paintbrush" data-category="red medium north-america">Indian Paintbrush</div>
<div class="flower" data-id="moss-verbena" data-category="purple other small south-america">Moss Verbena</div>
<div class="flower" data-id="climbing-dayflower" data-category="blue tiny south-america">Climbing Dayflower</div>
<div class="flower" data-id="antarctic-pearlwort" data-category="green yellow large antarctica">Antarctic Pearlwort</div>
</div>
Raw
script.js
var $filterCheckboxes = $('input[type="checkbox"]');
var filterFunc = function() {
var selectedFilters = {};
$filterCheckboxes.filter(':checked').each(function() {
if (!selectedFilters.hasOwnProperty(this.name)) {
selectedFilters[this.name] = [];
}
selectedFilters[this.name].push(this.value);
});
// create a collection containing all of the filterable elements
var $filteredResults = $('.flower');
// loop over the selected filter name -> (array) values pairs
$.each(selectedFilters, function(name, filterValues) {
// filter each .flower element
$filteredResults = $filteredResults.filter(function() {
var matched = false,
currentFilterValues = $(this).data('category').split(' ');
// loop over each category value in the current .flower's data-category
$.each(currentFilterValues, function(_, currentFilterValue) {
// if the current category exists in the selected filters array
// set matched to true, and stop looping. as we're ORing in each
// set of filters, we only need to match once
if ($.inArray(currentFilterValue, filterValues) != -1) {
matched = true;
return false;
}
});
// if matched is true the current .flower element is returned
return matched;
});
});
$('.flower').hide().filter($filteredResults).show();
}
$filterCheckboxes.on('change', filterFunc);
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Raw
style.css
body {
font-family:'Arial';
color:#646464;
}
.continents-wrap {
float:left;
width:20%;
margin:0 5% 0 0;
padding:0;
}
.flowers-wrap {
float:left;
width:20%;
margin:0 5% 0 0;
padding:0;
position:relative;
}
.flowers {
float:left;
width:50%;
}
.flowers div {
float:left;
width:90%;
height:68px;
line-height:68px;
padding:0 5%;
background:#eee;
margin:0 0 1px;
position:relative;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment