Question

I have an archive page that shows custom posts, each of which has a div that shows the post’s taxonomy terms (custom categories ‘jobtype’) in a div like so:

<div class="hidden tags category1 category2 cat3 etc..."></div>

Then I have a form with checkboxes each with a value that corresponds to some possible categories that the posts can have:

<input class="filterbox" type="checkbox" name="interest" value="academia" />Academia<br />
<input class="filterbox" type="checkbox" name="interest" value="adminassistant" />Admin/Assistant<br />
<input class="filterbox" type="checkbox" name="interest" value="communicationsmarketing" />Communications/Marketing<br />
<input class="filterbox" type="checkbox" name="interest" value="development" />Development<br />

I want to use jQuery to filter (read: $('.postclass').hide();) the current posts based on the checkboxes selected. Currently I’m using the following jQuery 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(){

}

And this is a dulled example of what a post entry looks like on the category page:

<div class="post_entry">
    <div class="post-thumb"></div>
    <h4 class="post-title"><a href="#" title="Title">Title</a></h4>
<div class="post-meta">
    <p class="post_meta_organization">Job Organization</p>
        <p class="post_meta_location">City, State</p>
        <p class="post_meta_url">Website: <a href="#">Click Here</a></p>
    </div>
    <div class="hidden tags early-career internship other web-developmentit"></div>
    <p class="post_excerpt">Post Content Here</p>
</div>

I think I need to do a $('.post_entry').each(); to check against the var tags, 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 <div class="hidden tags..."></div>

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 .each() function it would be highly appreciated.

If you want to check out more of the layout, go to http://www.cirkut.net/wp/libertyguide/jobs

If any more info is needed, please ask.

SUB-QUESTION:

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.

If I have a submit button <input id="filter_submit" value="FIND" />

and I alter the jQuery to be

$('#filter_submit').click( function() {
    $('.tags').parent().hide();
    $('input:checked').each( function(i) {
    $('div.' + $(this).val()).parent().show();
});

When I click the submit button, all the posts hide. Any help?

Answer 1

Would this be what you’re looking for: http://jsfiddle.net/3qwty/1/

$('input').click( function() {
    $('.tags').hide();
    $('input:checked').each( function() {
        $('div.' + $(this).val()).show();
    });
});

It’s currently set to only show the items that are selected, but you could flip it to hide the items that are selected instead (i.e., http://jsfiddle.net/3qwty/2/).

EDIT:

It looks like you might be hiding the container div of post-meta, in which case you could do this:
http://jsfiddle.net/3qwty/3/, which hides the parent container

$('input').click( function() {
    $('.tags').parent().show();
    $('input:checked').each( function() {
        $('div.' + $(this).val()).parent().hide();
    });
});

SUBQUESTION EDIT:

Modified to ‘re-show’ all posts when all checkboxes are cleared:
http://jsfiddle.net/3qwty/8/

$('input').click( function() {
    $('.tags').parent().hide();
    $('input:checked').each( function() {
        $('div.' + $(this).val()).parent().show();
    });
    if (!$('input:checked').length) $('.tags').parent().show();
});