jQuery Multiple Checkbox Page Filter

Question

I've been trying to figure out how to do this properly and cannot seem to get it to work.

I want to use jQuery to essentially pick and choose what I want to show on a page. I've looked and tried to find some script, some kind of worked but not really how I wanted it to.

The page will use checkboxes as "tags", let's say arts, computers, health, video games

 <div class="tags">
 <label><input type="checkbox" class="arts" /> Arts </label>
 <label><input type="checkbox" class="computers" /> Computers </label>
 <label><input type="checkbox" class="health" /> Health </label>
 <label><input type="checkbox" class="video-games" /> Video Games </label>
 </div>

Then on the page there will be results and each result has tags attached to it.

 <ul class="results">
 <li class="arts computers">
     Result 1
 </li>
 <li class="video-games">
     Result 2
 </li>
 <li class="computers health video-games">
     Result 3
 </li>
 <li class="arts video-games">
     Result 4
 </li>
 </ul>

I want to be able to click on arts and video games and it will display everything that has both arts AND video-games, so result 4. Or be able to just choose computers and get back results 1 and 3.

I was thinking I could do something along the lines of

 $('.tags input').click( function() {
      $('.results > li').hide();
      //For each one checked
      $('input').is(':checked').each( function() {
           //Display that result
           $('.results li').hasClass($(this).attr('class')).show();
      });      
 });

but it doesn't work, it just hides everything but then doesn't come back to show the rest. I know the logic is completely wrong, I don't think i'm supposed to use the each in that way? Maybe use it to grab all of the classes in an array then show the li's that have those classes?

Any Ideas?

Answer 1

• Use the .change() event of the checkbox.
• .hasClass() returns a boolean.
• It makes more sense to store that information an attribute other than class, such as rel or a data-* attribute.

---

$('div.tags').delegate('input:checkbox', 'change', function()
{
     var $lis = $('.results > li').hide();
     $('input:checked').each(function()
     {
          $lis.filter('.' + $(this).attr('rel')).show();
     });      
}).find('input:checkbox').change();

Demo: http://jsfiddle.net/mattball/d2v4Q/

---

@Justin asks

How would you change this to return only the lis that match all of the checked boxes instead of any one of them?

Stuff (whatever attribute you're using) from each checked input into an array, String.join('.') it to create one big class selector, and then .filter() the <li>s as before:

var selector = $('input:checked').map(function ()
{
    return $(this).attr('rel');
}).get().join('.');
$lis.filter(selector).doWhatever();