Checkbox Product Filtering Issue - Need JS Help

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.

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();
    }
});

@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: Filtering on Checkboxes array - JSFiddle - Code Playground

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?

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

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

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>