title: Jquery multiple checkbox filtering
body: <p>I have three sets of checkboxes which allow me to filter a number of divs based on data attributes. This works great but not as I need it to.</p>
  
  <p>If you visit the <a href="http://jsfiddle.net/n3EmN/" rel="nofollow">jsfiddle</a> below you will see a working test.</p>
  
  <p>What I need it to do is:</p>
  
  <ol>
  <li><p>When more than one option is chosen within the same category e.g. 'small' and 'medium', it should increase the results i.e. show all 'small' and 'medium' results, (which is what it does at the moment).</p></li>
  <li><p>When more than one option is chosen within different categories e.g. 'medium' and 'north america' it should reduce the results i.e. show all 'medium' flowers in 'north america'</p></li>
  </ol>
  
  <p>How would I go about fixing/amending my code to make this work please? (I hope this makes sense).</p>
  
  <p>Below is the jquery I'm using:</p>
  
  <pre><code>            $('.flowers-wrap, .continents-wrap').delegate('input[type=checkbox]', 'change', function() {
                  var $lis = $('.flowers &gt; div'),
                      $checked = $('input:checked');  
                  if ($checked.length) {                          
                      var selector = '';
                      $($checked).each(function(index, element){
                          if(selector === '') {
                              selector += "[data-category~='" + element.id + "']";                  
                          } else {
                              selector += ",[data-category~='" + element.id + "']";
                          }
                      });                        
                      $lis.hide(); 
                      console.log(selector);
                      $('.flowers &gt; div').filter(selector).show();               
                  } else {
                      $lis.show();
                  }
              });
  </code></pre>
  
  <p>Please see the jsfiddle I have setup to demonstrate the issue I'm having - <a href="http://jsfiddle.net/n3EmN/" rel="nofollow">http://jsfiddle.net/n3EmN/</a></p>