Poro Poro - 6 months ago 25
jQuery Question

jQuery hide on checkbox multiple values

I have 7 checkboxes with all a different ID. Those ID's correspondent with div's containing an data-methode in it. Clicking on a checkbox will hide all div's except for that one with the corresponding ID.

At this moment that works! But when I select multiple checkboxes all the divs disappear.

This is my javascript:

<script type="text/javascript">
jQuery('.filter_methode input').change(function()
{
jQuery('.featured-item-container').show();
jQuery('input').each(function()
{
var Checked;
if(Checked = jQuery(this).attr('checked'))
{
jQuery(".featured-item-container:not([data-methode='" + this.id + "'])").hide();
};
});
});
</script>


I wonder how I can optimize this script so it listens to all selected ID's.

Edit
Here is the HTML:

<div class="filter_methode">
<label><input type="checkbox" name="methode_1" id="methode_1" />
Methode 1</label>

<label><input type="checkbox" name="methode_2" id="methode_2" />
Methode 2</label>

<label><input type="checkbox" name="methode_3" id="methode_3" />
Methode 3</label>

<label><input type="checkbox" name="methode_4" id="methode_4" />
Methode 4</label>

<label><input type="checkbox" name="methode_5" id="methode_5" />
Methode 5</label>


<label><input type="checkbox" name="methode_6" id="methode_6" />
Methode 6</label>


<label><input type="checkbox" name="methode_7" id="methode_7" />
Methode 7</label>

<label><input type="checkbox" name="methode_8" id="methode_8" />
Methode 8</label>




<div class="featured-container col-md-12">
<div class="row">
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_3">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_7">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_8">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_2">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_4">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_8">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_5">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_6">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_5">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_1">
Some text and image in here
</div>
<div class="featured-item-container" data-methode="methode_2">
Some text and image in here
</div>
</div>
</div>


So when I click checkbox with ID methode_1 it does show me only the divs with data-methode="methode_1", but when I also click on checkbox methode_2 all divs disappear instead of showing me the divs with methode_1 and methode_2

Answer

Now that I have the code here is the solution:

jQuery('.filter_methode input').change(function()
    {
        jQuery('.featured-item-container').hide();
        jQuery('input').each(function(k,v)
            { 
            var Checked = $(v).prop( "checked" );
            if(Checked)
                { 
                    jQuery(".featured-item-container[data-methode='" + v.id + "']").show();
                };
        }); 
        if(jQuery('input:checked').length == 0) {
            jQuery('.featured-item-container').show();
        }
    });

there is no "this" in an anonymous function. You can access the object with the second parameter.

see here: https://jsfiddle.net/92u6u72L/3/