jQuery filtering using checkbox selections

Question

I am trying to create a checkbox filtering system that will have two categories. These categories will output results that are exclusive to each. I've created the fiddle page here to show what I am doing. I want to show only results that match both categories.

The HTML testing looks like this:

<div class="filter">
    <form id="partners">
        <h4>Filter by Venue:</h4>
        <input type="checkbox" name="team" value="BBG" />BBG<br />
        <input type="checkbox" name="team" value="BCM" />BCM<br />
        <input type="checkbox" name="team" value="BM" />BM<br />
        <input type="checkbox" name="team" value="BPL" />BPL<br />
        <input type="checkbox" name="team" value="BPP" />PP<br />
        <input type="checkbox" name="team" value="PPZ" />PPZ<br />
    </form>
    <br />
    <h4> Filter by Ages: </h4>
    <form id="ages">
        <input type="checkbox" name="brand" value="aAll" />All Ages<br />
        <input type="checkbox" name="brand" value="aAdults" />Adults<br />
        <input type="checkbox" name="brand" value="aTeens" />Teens<br />
        <input type="checkbox" name="brand" value="a0-18" />0-18 months<br />
        <input type="checkbox" name="brand" value="a1" />1.5-3 years<br />
        <input type="checkbox" name="brand" value="a2" />2.5-5 years<br />
        <input type="checkbox" name="brand" value="a4-7" />4-7 years<br />
        <input type="checkbox" name="brand" value="a7-12" />7-12 years<br />
    </form>
</div>
<hr />
<div class="event">
    Item 1  BPP aAll
    <span class="check BPP aAll"> </span>
</div>
<div class="event">
    Item 2  BCM a2
    <span class="check BCM a2"> </span>
</div>
<div class="event">
    Item 3 BPP aAll
    <span class="check BPP aAll"> </span>
</div>
<div class="event">
    Item 4 BPP a7-12
    <span class="check BPP a7-12"> </span>
</div>

And my jQuery looks like this:

function filterThis() {
    var checked = $('input:checked');
    var venues = $('#partners input:checked').map(function() {
        return this.value;
    }).get();
    var ages = $('#ages input:checked').map(function() {
        return this.value;
    }).get();
    var both = $('input:checked').map(function() {
        return this.value;
    }).get();

    var details = $('.check');
    details.parents('.event').hide();

    if ($('input:checked').length === 0) {
        details.parents('.event').show();
    } else { 
        checked.each(function(index) {
            if (ages.length === 0) {
               console.log(venues[index]);
               $(".check." + venues[index].replace(' ', '.')).parents('.event').show();
            } else if (venues.length === 0) {
               console.log(ages[index]);
               $(".check." + ages[index].replace(' ', '.')).parents('.event').show();
            } else {
               console.log(both[index]);;
               $(".check." + both[index].replace(' ', '.')).parents('.event').show();
            }
        });
    }
}
$('input:checkbox').change(filterThis);

doktorgradus · Accepted Answer · 2012-09-17 17:15:22Z

1

JQuery .map() returns array, not string.

Replace:

$(".check." + both[index].replace(' ', '.')).parents('.event').show();

with:

$(".check." +  both.toString().replace(',', '.')).parents('.event').show();

answered Sep 17, 2012 at 17:15

doktorgradus

6271 gold badge5 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

doktorgradus Over a year ago

jsfiddle.net/aFdGt - if I select both BPP and aAll, I see Item 1 and Item 3, if select BPP and a7-12, I see Item 4, it solve your question?

Tim McLoone Over a year ago

It works great until you select another venue or age. When you select another age, nothing happens and if you select another venue it clears. I need to be able to select all the venues and filter these down by age and visa versa.

doktorgradus Over a year ago

Oh, I'm sorry, I misunderstood you. My cuurent solution (on my current interpretation): jsfiddle.net/aFdGt/3

Collectives™ on Stack Overflow

jQuery filtering using checkbox selections

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related