jQuery multiple selector with overruling
<p>I have a list of div's I want to filter with 2 groups of checkboxes: <code>Type</code> and <code>Category</code>.</p>

<p>When 2 categories are checked, it should show DIV's containing at least 1 of the categories. </p>

<p>When a type is checked, it should only shows DIV's from that type. Even if it contains a checked category.</p>

<pre><code>&lt;input type="checkbox" name="type[]" value="Type 1"&gt;
&lt;input type="checkbox" name="type[]" value="Type 2"&gt;
&lt;input type="checkbox" name="type[]" value="Type 3"&gt;

&lt;input type="checkbox" name="category[]" value="1"&gt;
&lt;input type="checkbox" name="category[]" value="2"&gt;
&lt;input type="checkbox" name="category[]" value="3"&gt;
&lt;input type="checkbox" name="category[]" value="4"&gt;
</code></pre>

<p>The DIV's:</p>

<pre><code>&lt;div data-type="Type 1" data-cat="1 4"&gt;
&lt;div data-type="Type 2" data-cat="1 2 3"&gt;
</code></pre>

<p>The code I have so far (only filters type):</p>

<pre><code>$('form input:checkbox').change(function(){
  var type = [];
  var checked = $(':checkbox:checked').length;

  // Hide all
  $('#videoHolder').children('div').hide();

  $(':checkbox:checked').each(function(i){
    type[i] = $(this).val();
    $('#videoHolder').children('div[data-type="' + type[i] + '"]').fadeIn();
  });

  // Show all
  if(checked==0){
      $('#videoHolder').children('div').fadeIn();
  } 
});
</code></pre>
