I'm currently working on a checkbox filter setup and using Jquery's .filter to sort through some divs.
Below is the snippet of Jquery code that I am using:
$(document).ready(function(){
var checkboxes = $('div.filter-groups').find('input:checkbox'),
general = $('.general');
function filterCheckboxes(){
var checked = checkboxes.filter(':checked');
general.hide();
$.each(checked, function(){
var rel = $(this).data('filter');
general.filter('.' + rel).show();
});
}
checkboxes.on('click', filterCheckboxes);
});
You can view the web page here:
Or check out this jsfiddle for a live demo: http://jsfiddle.net/jonathanSumner90/nh8vr1kp/1/
I'm looking for a way to make the .filter function verify if the div has all the attributes of the selected checkboxes before displaying. Any ideas?
Also, I've noticed that when I check and then uncheck a box or boxes, all the divs disappear. Is there a way to fix this issue?