Onload the check boxes are unchecked and the all list items are displayed. When a filter is checked on the those list items relating are be displayed. The problem i am having is when you uncheck all of the checkboxes again i need all items to show rather than hide.
Here's my fiddle...
http://jsfiddle.net/amesy/B9Hnu/124/
$(function() {
var $checkboxes = $("input[id^='type-']");
$('input[type=checkbox]:checked').attr('checked', false);
$checkboxes.change(function() {
var selector = '';
$checkboxes.filter(':checked').each(function() { // checked
selector += '.' + this.id.replace('type-', '') + ', ';
// builds a selector like '.A, .B, .C, '
});
selector = selector.substring(0, selector.length - 2); // remove trailing ', '
$('#list li').hide() // hide all rows
.filter(selector).show(); // reduce set to matched and show
});
});
Ultimately this will be used in a portfolio but I will be splitting the filters/tags up into their categories. If anyone wants to advise it would be most appreciated.
here is fiddle http://jsfiddle.net/B9Hnu/125/