Jquery 筛选元素的属性数组

我想按几个属性对一组电影进行排序，例如类型或格式。这个想法是用户用复选框元素选择他想在屏幕上出现的电影类型。我的问题是，如何将它插入多个属性，比如像数组一样插入多个名称以过滤它们

<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>

格式：
标准
3D
Imax

体裁：
喜剧
戏剧
科幻小说
恐怖

假设电影用数组表示：

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);
});

---

完整演示：

如果我们不知道您计划如何使其工作，则无法帮助您。给我们展示一些你试图用来获得过滤效果的代码，比如这个要过滤的属性数组，以及如何测试每个元素