title: Isotope: combination filtering + multiple selection
body: <p>To all jQuery heros out there, I need help! (again) </p>
  
  <p>I found similar questions to mine on the internet but there were no answers so far :-/</p>
  
  <p>I want to filter a bunch of items with jquery isotope. I adapted the combination filter example from the plugin homepage, which works fine and looks like so: </p>
  
  <pre><code>$(function () {
  var $container = $('#container'),
      filters = {};
  $container.isotope({
      itemSelector: '.item',
      filter: '',
  });
  
  // filter links
  $('.filter a').click(function () {
      var $this = $(this);
      // don't proceed if already selected
      if ($this.hasClass('selected')) {
          return;
      }
  
      var $optionSet = $this.parents('.option-set');
      // change selected class
      $optionSet.find('.selected').removeClass('selected');
      $this.addClass('selected');
  
      // store filter value in object
      // i.e. filters.color = 'red'
      var group = $optionSet.attr('data-filter-group');
      filters[group] = $this.attr('data-filter-value');
  
      // convert object into array
      var isoFilters = [];
      for (var prop in filters) {
          isoFilters.push(filters[prop])
      }
      var selector = isoFilters.join('');
      $container.isotope({
          filter: selector
      });
      return false;
  }); });
  </code></pre>
  
  <p>and some html of the filter menu:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul class="filter option-set" data-filter-group="who"&gt;
          &lt;li&gt;&lt;a href="#filter-who-any" data-filter-value="" class="selected"&gt;Any&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#filter-who-boys" data-filter-value=".boys"&gt;Boys&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#filter-who-girls" data-filter-value=".girls"&gt;Girls&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I set up a fiddle demo with 3 filter categories which can be combined: <strong><a href="http://jsfiddle.net/alani/XERHK/" rel="nofollow">jsFiddle</a></strong></p>
  
  <p>Now I'd like to make it possible to select <strong>multiple</strong> tags from each category:</p>
  
  <p>Category 1: a <strong>OR</strong> b <strong>OR</strong> c</p>
  
  <p><strong>AND</strong></p>
  
  <p>Categoy 2: a <strong>OR</strong> b <strong>OR</strong> c</p>
  
  <p><strong>AND</strong></p>
  
  <p>Categoy 3: a <strong>OR</strong> b <strong>OR</strong> c</p>
  
  <p>There's a <a href="http://jsfiddle.net/desandro/GwBa8/" rel="nofollow">check-box-example</a> by desandro, but this is not quite the thing I'm searching for, because I want to keep the AND condition between the categories. Basically I want 3 filter categories with some check-boxes for each of them (or links but I guess check-boxes are more functional). 
  I think the methods used in both examples are completely different and I don't know how to combine their functionality. </p>
  
  <p>I hope you get my point and that anyone could help me find a solution. </p>
  
  <p>Thanks in advance!</p>