CODEWITHSUNDEEP
jquerycheckboxfilter
Tim McLoone
Tim McLoone

Reputation: 33

jQuery filtering using checkbox selections

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);​

Upvotes: 3

Views: 569

Answers (1)

doktorgradus
doktorgradus

Reputation: 627

JQuery .map() returns array, not string.

Replace:

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

with:

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

Upvotes: 1

Related Questions