Display/hide divs after selection of multiple radio buttons

Question

I am currently working on a filter that displays products categories through Radio Button selection:

<div class="round" id="r-group">x
   <label for="r2" class="label-filter">
      <input type="radio" id="r1" name="club-selection" value="club-selection">
      <span class="label-text">The Club Selection</span>
   </label>
   <label for="r2" class="label-filter">
      <input type="radio" id="r2" name="upholstery" value="upholstery">
      <span class="label-text">All Upholstery</span>
   </label>
   <label for="r3" class="label-filter">
      <input type="radio" id="r3" name="casegoods" value="casegoods">
      <span class="label-text">All Casegoods</span>
   </label>
   <label for="r3" class="label-filter">
      <input type="radio" id="r4" name="tables" value="tables">
      <span class="label-text">All Tables</span>
   </label>
   <label for="r3" class="label-filter">
      <input type="radio" id="r5" name="lighting" value="lighting">
      <span class="label-text">All Lighting</span>
   </label>
</div>

I want to be able show each category as I select the radio buttons. For example: If I select All Casegoods, I want to only show the div with data-category="casegoods". If I select Tables and Lighting I want to show the div with data-category="tables" and data-category="lighting". These are the basic structure of the divs per category:

<div class="product" data-category="club-selection">
  <h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
  <h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
  <h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
  <h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
  <h4>Lighting</h4>
</div>

So far, I am able to store the value of the selected radio buttons into an array (selectedValues), but I am not sure what to do next to be able to display only the divs of the categories selected.This is the code that store the values:

$(function(){
   var items = $("[data-category]");//get all the elements that has data-categories attribute      

   items.show(); //show all of the elements we found above

   $("input[type=radio]").on("change",function(ev){ //bind onchange event

      var selectedValues = []; //this array will hold all of the current categories

      $("input:checked").each(function(idx, checkedRadio){//get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
         selectedValues.push($(checkedRadio).val().toLowerCase());

       //THIS IS WHERE I´M STUCK. What do I do with the values stored in the array?

      });  
    });    
 });

EDIT:fixed the ids on the inputs.

Answer 1

You can do something like this:

var elems = $("[data-category]").filter(function() {
  return selectedValues.indexOf($(this).data("category")) > -1;
});

elems.show();

I believe you want to use checkbox and not radio, since you cant deselect them again. Else you have to use the same name so you cant select more than one.

Also please note that many of your inputs have the same id, ID should always be unique.

Demo

$(function() {
  var items = $("[data-category]"); //get all the elements that has data-categories attribute      

  items.show(); //show all of the elements we found above

  $("input[type=checkbox]").on("change", function(ev) { //bind onchange event
    $("[data-category]").hide()
    var selectedValues = []; //this array will hold all of the current categories

    $("input:checked").each(function(idx, checkedRadio) { //get all of the input radio buttons that are checked and add the value of each of them to the selectedValues array we created above
      selectedValues.push($(checkedRadio).val().toLowerCase());

    });

    var elems = $("[data-category]").filter(function() {
      return selectedValues.indexOf($(this).data("category")) > -1;
    });

    elems.show();

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="round" id="r-group">
  <label for="r2" class="label-filter">
      <input type="checkbox" id="r2" name="club-selection" value="club-selection">
      <span class="label-text">The Club Selection</span>
   </label>
  <label for="r2" class="label-filter">
      <input type="checkbox" id="r2" name="upholstery" value="upholstery">
      <span class="label-text">All Upholstery</span>
   </label>
  <label for="r3" class="label-filter">
      <input type="checkbox" id="r3" name="casegoods" value="casegoods">
      <span class="label-text">All Casegoods</span>
   </label>
  <label for="r3" class="label-filter">
      <input type="checkbox" id="r3" name="tables" value="tables">
      <span class="label-text">All Tables</span>
   </label>
  <label for="r3" class="label-filter">
      <input type="checkbox" id="r3" name="lighting" value="lighting">
      <span class="label-text">All Lighting</span>
   </label>
</div>
<div class="product" data-category="club-selection">
  <h4>The Club Selection</h4>
</div>
<div class="product" data-category="upholstery">
  <h4>Upholstery</h4>
</div>
<div class="product" data-category="casegoods">
  <h4>Casegoods</h4>
</div>
<div class="product" data-category="tables">
  <h4>All Tables</h4>
</div>
<div class="product" data-category="lighting">
  <h4>Lighting</h4>
</div>