Массив атрибутов для фильтрующих элементов

Question

Я хочу сортировать набор фильмов по нескольким атрибутам, таким как жанр или формат. Идея состоит в том, что пользователь выбирает с элементами флажка тип фильмов, которые он хочет отображать на экране. Мой вопрос: как можно вставить несколько атрибутов, например, вставить несколько имен, например массив, чтобы их отфильтровать?

<div id="filters" class="filters"> 
    <strong>Format:&nbsp</strong> 
    <input type="checkbox" name="format" value="Standard">Standard &nbsp&nbsp 
    <input type="checkbox" name="format" value="3D">3D &nbsp&nbsp 
    <input type="checkbox" name="format" value="Imax">Imax <br> 

    <strong>Genre:&nbsp</strong> 
    <input type="checkbox" name="genre" value="comedy">Comedy &nbsp&nbsp 
    <input type="checkbox" name="genre" value="drama">drama &nbsp&nbsp 
    <input type="checkbox" name="genre" value="sciencefiction">Science fiction &nbsp&nbsp 
    <input type="checkbox" name="genre" value="horror">Horror <br> 

</div> 

Answer 1

Предполагая, что фильмы представлены с массивом:

var movies = [ 
    { 
    title: 'Avatar', 
    format: '3D', 
    genre: 'sciencefiction' 
    }, 
    { 
    title: 'Saw', 
    format: 'Standard', 
    genre: 'horror' 
    } 
]; 

Вам нужно отфильтровать этот массив, основанный на том, что флажки проверяются. Вы можете сделать это в качестве прослушивателя событий:

// Some code skipped for brewity 

$controls.on('change', function() { 
    var formats = $formats.filter(':checked').map(getValue).get(); 
    var genres = $genres.filter(':checked').map(getValue).get(); 

    var filtered = movies.filter(function (e) { 
     var formatMatch = formats.length === 0 || formats.indexOf(e.format) > -1; 
     var genreMatch = genres.length === 0 || genres.indexOf(e.genre) > -1; 

     return formatMatch && genreMatch; 
    }); 

    render($output, filtered); 
}); 

Полный демо: http://jsfiddle.net/V4aW2/