Фильтр страницы с несколькими флажками jQuery

• Используйте событие .change() флажка.
• .hasClass() возвращает логическое.
• Имеет смысл хранить эту информацию в атрибуте, отличном от class, например rel или data-*.

$('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();

Демо: http://jsfiddle.net/mattball/d2v4Q/

@Justin спрашивает

Как бы вы изменили это, чтобы возвращать только те списки, которые соответствуют всем отмеченным флажкам, вместо любого из них?

Заполните (какой бы атрибут вы ни использовали) из каждого проверенного ввода в массив, String.join('.') это создайте один большой селектор классов, а затем .filter() <li>s, как и раньше:

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

Я немного изменил решение Мэтта, чтобы оно выполняло то, что вы просили. По крайней мере, как я это интерпретировал (показаны только элементы, соответствующие всем выбранным категориям). Это ни в коем случае не так элегантно, как решение Мэтта:

HTML:

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

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

И JS:

$('div.tags').delegate('input:checkbox', 'change', function() {
    $('.results > li').hide();

    var selector = $('input:checked').map(function() {
        return $(this).attr('data-category');
    }).get();

    function matchesCategories(elem) {
        var elemCats = elem.attr('data-category');

        if (elemCats) {
            elemCats = elemCats.split(' ');
        } else {
            elemCats = Array();
        }
        for (var i = 0; i < selector.length; i++) {
            console.log("testing " + selector[i] + " in:");
            console.log(elemCats);
            if (jQuery.inArray(selector[i], elemCats) == -1) {
                return false;
            }
        }
        return true;
    }
    $('.results > li').each(function(i, elem) {
        if (matchesCategories(jQuery(elem))) {
            $(elem).show();
        }
    });

}).find('input:checkbox').change();

Если вы хотите попробовать, вот моя запись jsfiddle (созданная Мэттом)

Попробуйте воспользоваться grep функцией. Псевдопсевдокод:

$(yourstuff).grep(filter1).grep(filter2)...

Две проблемы.

1. Селектор входа -.is - это функция, а не селектор.
2. hasClass - тоже не селектор.

Оба возвращают true или false, поэтому вы не можете работать с их результатами как с объектом jQuery.

http://jsfiddle.net/5z7M5/3/

 $('.tags input').click( function() {
      $('.results > li').hide();
      //For each one checked
      $('input:checked').each( function() {

           $('.'+$(this).attr('class')).show();
      });      
 });

$('.tags')
    .on('update', function() {
        // Limit the selector(s) to search for:
        var $filters = $(this).find('input:checked');

        // Get the class names of interest
        // Return null (rather than "") to keep them out of the result array
        var $classes = $filters.map(function(){ return this.className || null; });

        // Use .replace() if your checkboxes might target multiple classes
        var selector = $classes.get().join('.').replace(/ /g,'.');

        var $results = $('ul.results > li').hide();

        if (selector) 
            $results.filter('.'+selector).show();
    })

    // Relay any changes to the display-state container (.tags)
    .on('change','input[type="checkbox"]',function() {
        $(event.currentTarget).trigger('update');
    })

    // When first loaded, apply the server-supplied checkbox state(s) to the page:
    .trigger('update');​

Мне очень нравится .on () :) [jQuery 1.7+]

http://jsfiddle.net/ne8dy/