ihateartists ihateartists - 7 days ago 6
Javascript Question

jQuery show only divs with multiple matching classes from radio buttons

I am trying to create a system to filter through some tags by hiding and showing the appropriate items. The idea is that you could select one radio button and it will show only the divs with the class matching the radio buttons ID. If you select multiple radio buttons, it would use all of the select ID's to create the class match.

Here is the markup I have now:

<h2>Brand</h2>
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Canon" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Epson" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_HP" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Lexmark" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Xerox" />

<h2>Type</h2>
<input type="radio" class="prodFilter" name="typeFilter" id="typ_Genuine" />
<input type="radio" class="prodFilter" name="typeFilter" id="typ_QualityRestored" />

<div class="prdbx brnd_Epson typ_Genuine">Product A</div>
<div class="prdbx brnd_Canon typ_Genuine">Product B</div>
<div class="prdbx brnd_Epson typ_QualityRestored">Product C</div>
<div class="prdbx brnd_Lexmark typ_Genuine">Product D</div>
<div class="prdbx brnd_Canon typ_QualityRestored">Product E</div>


I have some jQuery that is getting the ID correctly, but it isn't showing the correct divs. If Epson is selected, then Genuine, all Genuine products display; instead of only Genuine Epson products.

The jQuery I have so far is below:



jQuery(document).ready(function(){

$('.prodFilter').one("click", function () {
$('.prdbx').hide(); // hide all products
});

// we clicked a filter
$('.prodFilter').click(function(e){

// for each clicked filter
$('.prodFilter').each(function(e) {
if($(this).is(":checked")){
var thisFilter = this.id;
$('.'+thisFilter).show(); // display the chosen products
}
});

});
});


Any help would be greatly appreciated!

Answer

What you need here is change your each() statement, use the each to loop just through the :checked radio buttons and then construct your Jquery selector from those values:

jQuery(document).ready(function() {
  $('.prodFilter').one("click", function() {
    $('.prdbx').hide();
  });
  $('.prodFilter').click(function(e) {
    $('.prdbx').hide();
    var thisFilter = "";
    $('.prodFilter:checked').each(function(e) {
      thisFilter += '.'+this.id;
    });
    $(thisFilter).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h2>Brand</h2>
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Canon" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Epson" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_HP" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Lexmark" />
<input type="radio" class="prodFilter" name="brandFilter" id="brnd_Xerox" />

<h2>Type</h2>
<input type="radio" class="prodFilter" name="typeFilter" id="typ_Genuine" />
<input type="radio" class="prodFilter" name="typeFilter" id="typ_QualityRestored" />

<div class="prdbx brnd_Epson typ_Genuine">Product A</div>
<div class="prdbx brnd_Canon typ_Genuine">Product B</div>
<div class="prdbx brnd_Epson typ_QualityRestored">Product C</div>
<div class="prdbx brnd_Lexmark typ_Genuine">Product D</div>
<div class="prdbx brnd_Canon typ_QualityRestored">Product E</div>