I want to filter some content using checkboxes.
I managed to do this thanks to an earlier post , which I simplified the DEMO a bit here.
My problem is that each content item can have more than one category. When I select category A and category B, and then deselect category B, the content item that has both categories is attached, deleted.
The project I'm working on will contain more than two categories. A content item can contain many categories.
HTML:
<ul id="filters"> <li> <input type="checkbox" value="categorya" id="filter-categorya" /> <label for="filter-categorya">Category A</label> </li> <li> <input type="checkbox" value="categoryb" id="filter-categoryb" /> <label for="filter-categoryb">Category B</label> </li> </ul> <div class="categorya categoryb">A, B</div> <div class="categorya">A</div> <div class="categorya">A</div> <div class="categorya">A</div> <div class="categoryb">B</div> <div class="categoryb">B</div> <div class="categoryb">B</div>
JavaScript:
$('input').click(function() { var category = $(this).val(); if (!$(this).attr('checked')) $('.' + category).hide(); else $('.' + category).show(); });
source share