Streaming live at 10am (PST)

Checkbox Product Filtering Issue - Need JS Help


#1

So I have embedded/hardcoded my products in order to get this filter to work. The problem I am running into is that when I uncheck a filter option, it doesn't reshow the item it had just hidden.

Here's the page I'm testing:
http://cerimani-new.webflow.io/our-collections/view-all

Here's my read-only link:
https://preview.webflow.com/preview/cerimani-new?preview=dbabe72ff005667d280cdbee5eb3ff6c

Here's the script (I don't know much JS so I tweaked a JSfiddle script to fit my needs):

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('.product').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('div[data-group*=' + this.value + ']').fadeIn();
        });
    } else {
        $('.products > div').fadeIn();
    }
});

I think the issue is with the products class. I gave the dynamic wrapper a class of .products but my guess is it's messing up because it's not hard coded? I tried inspecting the dynamic list wrapper and used some of those classes without success as well. Any thoughts?? I've been struggling with this for hours.


#2

You almost got it. You have to reset everything to hidden first no matter what you click so you can fade in stuff.

$('input[type="checkbox"]').click(function() {
    $('.products > div').hide();
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('input[type="checkbox"]:checked').each(function() {
            $('div[data-group*=' + this.value + ']').fadeIn();
        });
    } else {
        $('.products > div').fadeIn();
    }
});

#3

@samliew Thanks for your response, but with the updated code now everything disappears when all checkboxes are unchecked. The hope was that if everything is unchecked it would show all.

I have it working here: https://jsfiddle.net/outerwhitespace/7cwpojfo/4/


#4

I considered using tabs for filtering but they want the checkbox combination filtering .. I'm assuming there's no way to do this with multiple, combo checkboxes?


#5

Correction, second line is hiding parent element. Should be $('.products > div').


#6

Hmm, Nope, that doesn't work either :-/


#7

My friend helped me figure this out :slight_smile: Final code is:

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
  $('.product').hide();
        $('input[type="checkbox"]:checked').each(function() {
$('div[data-group*=' + this.value + ']').fadeIn();
        });
    } else {
        $('.product').fadeIn();
    }
});

And for anyone else needing help with this, here is the sample html:

<div id="filters">
<input id="red" type="checkbox" value="red" /><label for="red">red</label>
<input id="blue" type="checkbox" value="blue" /><label for="blue">blue</label>
<input id="green" type="checkbox" value="green" /><label for="green">green</label>
<input id="yellow" type="checkbox" value="yellow" /><label for="yellow">yellow</label>
</div>

<div class="products">
<div data-group="yellow" class="product">yellow</div>
<div data-group="red" class="product">red</div>
<div data-group="blue" class="product">blue</div>
<div data-group="green" class="product">green</div>
</div>