title: jQuery filtering by post
body: <p>I have an archive page that shows custom posts, each of which has a <code>div</code> that shows the post's taxonomy terms (custom categories 'jobtype') in a div like so: </p>
  
  <pre><code>&lt;div class="hidden tags category1 category2 cat3 etc..."&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Then I have a form with checkboxes each with a value that corresponds to some possible categories that the posts can have:</p>
  
  <pre><code>&lt;input class="filterbox" type="checkbox" name="interest" value="academia" /&gt;Academia&lt;br /&gt;
  &lt;input class="filterbox" type="checkbox" name="interest" value="adminassistant" /&gt;Admin/Assistant&lt;br /&gt;
  &lt;input class="filterbox" type="checkbox" name="interest" value="communicationsmarketing" /&gt;Communications/Marketing&lt;br /&gt;
  &lt;input class="filterbox" type="checkbox" name="interest" value="development" /&gt;Development&lt;br /&gt;
  </code></pre>
  
  <p>I want to use jQuery to filter (read: <code>$('.postclass').hide();</code>) the current posts based on the checkboxes selected.  Currently I'm using the following jQuery code:</p>
  
  <pre><code>var $checkboxes;
  
  function storecat() {         
      var tags = $checkboxes.map(function() {
          if(this.checked) return this.value;
      }).get().join(' ');
      $('#selected-interests').html(tags); 
  }
  
  $(function() {
      $checkboxes = $('.filterbox:checkbox').change(storecat);
  });
  
  $('#filtersubmit').click(){
  
  }
  </code></pre>
  
  <p>And this is a dulled example of what a post entry looks like on the category page:</p>
  
  <pre><code>&lt;div class="post_entry"&gt;
      &lt;div class="post-thumb"&gt;&lt;/div&gt;
      &lt;h4 class="post-title"&gt;&lt;a href="#" title="Title"&gt;Title&lt;/a&gt;&lt;/h4&gt;
  &lt;div class="post-meta"&gt;
      &lt;p class="post_meta_organization"&gt;Job Organization&lt;/p&gt;
          &lt;p class="post_meta_location"&gt;City, State&lt;/p&gt;
          &lt;p class="post_meta_url"&gt;Website: &lt;a href="#"&gt;Click Here&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="hidden tags early-career internship other web-developmentit"&gt;&lt;/div&gt;
      &lt;p class="post_excerpt"&gt;Post Content Here&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I think I need to do a <code>$('.post_entry').each();</code> to check against the var <code>tags</code>, but I'm entirely unsure of where to begin.  What I think I need is to create an array of tags (right now they're creating a list?), and create an array of classes in the <code>&lt;div class="hidden tags..."&gt;&lt;/div&gt;</code></p>
  
  <p>I want it to hide posts that don't have any relevant tags, but only show posts that have all the tags selected.  If anyone can help out with my <code>.each()</code> function it would be highly appreciated.</p>
  
  <p>If you want to check out more of the layout, go to <a href="http://www.cirkut.net/wp/libertyguide/jobs" rel="nofollow">http://www.cirkut.net/wp/libertyguide/jobs</a></p>
  
  <p>If any more info is needed, please ask.</p>
  
  <p><strong>SUB-QUESTION:</strong></p>
  
  <p>How would make all posts show if NO inputs are selected?  I didn't post this as a new question because I find this highly relevant to this question.</p>
  
  <p>If I have a submit button <code>&lt;input id="filter_submit" value="FIND" /&gt;</code></p>
  
  <p>and I alter the jQuery to be </p>
  
  <pre><code>$('#filter_submit').click( function() {
      $('.tags').parent().hide();
      $('input:checked').each( function(i) {
      $('div.' + $(this).val()).parent().show();
  });
  </code></pre>
  
  <p>When I click the submit button, all the posts hide.  Any help?</p>