Hide elements who have one of the selected classes per checkbox (jQuery)

Question

I have some checkboxes and want to hide all elements who have the checked class. It's some kind of meals with incredients and I want the user to be able to hide all menus with eg "cheese".

I tried with "toggle" but there is a problem with it when I click further elements (thought it would be an easy task):

$(document).ready(function(){
  $('input[type="checkbox"]').click(function(){
    var inputValue = $(this).attr("value");
    $("." + inputValue).toggle();
  });
});

here is a fiddle: Hide elements who have class

Answer 1

What you're looking for is probably something more along the lines of this. (Explanation/comments included in the code)

https://jsfiddle.net/p7Lvo2fd/3/

$(document).ready(function(){
  $('input[type="checkbox"]').click(function(){

    //Show all articles
    $("article").show();

    //Get checked boxes
    var $checkedBoxes = $("input[type=checkbox]:checked");

    //For each checked box, hide the associated articles
    $checkedBoxes.each(function() {
        $("article").filter("." + $(this).val()).hide();
    });

  });
});

Or if you prefer a snippet:

 $(document).ready(function() { $('input[type="checkbox"]').click(function() { $("article").show(); var $checkedBoxes = $("input[type=checkbox]:checked"); $checkedBoxes.each(function() { $("article").filter("." + $(this).val()).hide(); }) }); }); 

 article { color: #fff; padding: 10px; margin-top: 10px; font-size: 20px; font-family: Roboto; background: tomato; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div> <label><input type="checkbox" name="incredientsCheckbox" value="dynamite"> dynamite</label> <label><input type="checkbox" name="incredientsCheckbox" value="chocolate"> chocolate</label> <label><input type="checkbox" name="incredientsCheckbox" value="strawberry"> strawberry</label> <label><input type="checkbox" name="incredientsCheckbox" value="cheese"> cheese</label> </div> <article class="strawberry dynamite"><strong>classes:</strong> dynamite - strawberry</article> <article class="strawberry chocolate"><strong>classes:</strong> strawberry - chocolate</article> <article class="strawberry"><strong>classes:</strong> strawberry</article> <article class="cheese"><strong>classes:</strong> cheese</article> <article class="cheese dynamite strawberry"><strong>classes:</strong> cheese - dynamite - strawberry</article> 

---

For a more clear implementation, you can also see this example: https://jsfiddle.net/p7Lvo2fd/5/

It changes the background instead of hiding the items, so it's easier to test.

Answer 2

Add to CSS these switches

.dynamite_hide {display: none}
.strawberry_hide {display: none}
.chocolate_hide {display: none}
.cheese_hide {display: none}

Change your click handler to this

$(document).ready(function(){
 $('input[type="checkbox"]').click(function(){
    var val = $(this).attr("value")
    if($(this).is(':checked'))
      $("." + val).addClass(val+"_hide")
    else
      $("." + val).removeClass(val+"_hide")
  });
});

Answer 3

You are going to want to do this on the change, not the click event - that way if you change via script it works. If you have preset values, you can trigger the change on startup.

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    var checks = $('input[type="checkbox"]:checked');
    //show all then hide checked stuff
    $('article').show();
    checks.each(function(index, item) {
      $('article').filter(function() {
        return $(this).hasClass($(item).val());
      }).hide();// hit DOM once, hide them
    });
  }).trigger("change");
});

Smaller filter, but does same thing:

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    var checks = $('input[type="checkbox"]:checked');
    //show all then hide checked stuff
    $('article').show();
    checks.each(function(index, item) {
      $('article').filter("."+item.value).hide();
    });
  });
});

Most efficient:

Now that we understand the concept, we can get a class list as a selector list and use that, saving hitting the DOM on each class found checked:

$(document).ready(function() {
  $('input[type="checkbox"]').on('change', function() {
    var classes = $('input[type="checkbox"]:checked').map(function() {
      return "." + this.value;
    }).get().join(",");
    $('article').show().filter(classes).hide();
  }).trigger("change");
});