How to show-hide div based on multiple class elements

Question

I'm trying to create a "narrow down" piece of code to implement on an ecommerce site. The idea is that by checking/unchecking boxes the user will be shown links to products that fit. So far my code works with the exception that checking multiple boxes and then unchecking them doesn't allow all the divs to reappear.

  function showMe (box) { var chboxs = document.getElementsByName("c1"); var vis = "block"; for(var i=0;i<chboxs.length;i++) { if(chboxs[i].checked){ vis = "none"; break; } } var x = document.getElementsByClassName(box); x[0].style.display = vis; x[1].style.display = vis; x[2].style.display = vis; x[3].style.display = vis; x[4].style.display = vis; x[5].style.display = vis; x[6].style.display = vis; x[7].style.display = vis; x[8].style.display = vis; x[9].style.display = vis; x[10].style.display = vis; x[11].style.display = vis; x[12].style.display = vis; x[13].style.display = vis; x[14].style.display = vis; x[15].style.display = vis; x[16].style.display = vis; x[17].style.display = vis; x[18].style.display = vis; x[19].style.display = vis; x[20].style.display = vis; } 

 <h3 align="center">What Elcometer 456 is Right for You?</h3> <form> <input type="checkbox" name="c1" onclick="showMe('F')">Ferrous<br> <input type="checkbox" name="c1" onclick="showMe('NF')">Non-Ferrous<br> <input type="checkbox" name="c1" onclick="showMe('FNF')">Dual Ferrous/Non-Ferrous<br><br> <input type="checkbox" name="c1" onclick="showMe('Scale1')">Range 0 - 60mils<br> <input type="checkbox" name="c1" onclick="showMe('Scale2')">Range 0 - 200mils<br> <input type="checkbox" name="c1" onclick="showMe('Scale3')">Range 0 - 500mils<br><br> <input type="checkbox" name="c1" onclick="showMe('Integral')">Integral<br> <input type="checkbox" name="c1" onclick="showMe('Separate')">Separate<br><br> <input type="checkbox" name="c1" onclick="showMe('Elcomaster')">Includes Elcomaster Tech<br><br> <div class="NF FNF Scale2 Scale3 Separate Elcomaster" style="display:block">Scale 1 Model E F</div> <div class="F NF Scale2 Scale3 Separate Elcomaster" style="display:block">Scale 1 Model E FNF</div> <div class="NF FNF Scale2 Scale3 Separate Elcomaster" style="display:block">Scale 1 Model B F</div> <div class="F FNF Scale2 Scale3 Separate Elcomaster" style="display:block">Scale 1 Model B NF</div> <div class="F NF Scale2 Scale3 Separate Elcomaster" style="display:block">Scale 1 Model B FNF</div> <div class="NF FNF Scale1 Scale3 Separate Elcomaster" style="display:block">Scale 2 Model B F</div> <div class="NF FNF Scale1 Scale2 Separate Elcomaster" style="display:block">Scale 3 Model B F</div> <div class="NF FNF Scale2 Scale3 Separate" style="display:block">Scale 1 Model S F</div> <div class="F NF Scale2 Scale3 Separate" style="display:block">Scale 1 Model S FNF</div> <div class="NF FNF Scale2 Scale3 Separate" style="display:block">Scale 1 Model T F</div> <div class="F NF Scale2 Scale3 Separate" style="display:block">Scale 1 Model T FNF</div> <div class="NF FNF Scale2 Scale3 Integral Elcomaster" style="display:block">Model B F</div> <div class="F FNF Scale2 Scale3 Integral Elcomaster" style="display:block">Model B NF</div> <div class="F NF Scale2 Scale3 Integral Elcomaster" style="display:block">Model B FNF</div> <div class="NF FNF Scale2 Scale3 Integral" style="display:block">Model S F</div> <div class="F FNF Scale2 Scale3 Integral" style="display:block">Model S NF</div> <div class="F NF Scale2 Scale3 Integral" style="display:block">Model S FNF</div> <div class="NF FNF Scale2 Scale3 Integral" style="display:block">Model T F</div> <div class="F FNF Scale2 Scale3 Integral" style="display:block">Model T NF</div> <div class="F NF Scale2 Scale3 Integral" style="display:block">Model T FNF</div> </form> 

Answer 1

You can use for loop :

var x = document.getElementsByClassName(box);
for(var i=0;i<x.length;i++){
   x[i].style.display = vis;
}

Answer 2

i added class item to each div so i could utilize classes

 $(document).ready(function() { $('input[type=checkbox]').on('change', function() { $('.item ').hide(); $('input[type=checkbox]:checked').each(function() { var value = $(this).attr('value'); $('.' + value).show(); }); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h3 align="center">What Elcometer 456 is Right for You?</h3> <form> <input type="checkbox" name="c1" value='F'/>Ferrous<br> <input type="checkbox" name="c1" value='NF'/>Non-Ferrous<br> <input type="checkbox" name="c1" value='FNF'/>Dual Ferrous/Non-Ferrous<br><br> <input type="checkbox" name="c1" value='Scale1'/>Range 0 - 60mils<br> <input type="checkbox" name="c1" value='Scale2'/>Range 0 - 200mils<br> <input type="checkbox" name="c1" value='Scale3'/>Range 0 - 500mils<br><br> <input type="checkbox" name="c1" value='Integral'/>Integral<br> <input type="checkbox" name="c1" value='Separate'/>Separate<br><br> <input type="checkbox" name="c1" value='Elcomaster'/>Includes Elcomaster Tech<br><br> <div class="item NF FNF Scale2 Scale3 Separate Elcomaster" style="display:none">Scale 1 Model E F</div> <div class="item F NF Scale2 Scale3 Separate Elcomaster" style="display:none">Scale 1 Model E FNF</div> <div class="item NF FNF Scale2 Scale3 Separate Elcomaster" style="display:none">Scale 1 Model B F</div> <div class="item F FNF Scale2 Scale3 Separate Elcomaster" style="display:none">Scale 1 Model B NF</div> <div class="item F NF Scale2 Scale3 Separate Elcomaster" style="display:none">Scale 1 Model B FNF</div> <div class="item NF FNF Scale1 Scale3 Separate Elcomaster" style="display:none">Scale 2 Model B F</div> <div class="item NF FNF Scale1 Scale2 Separate Elcomaster" style="display:none">Scale 3 Model B F</div> <div class="item NF FNF Scale2 Scale3 Separate" style="display:none">Scale 1 Model S F</div> <div class="item F NF Scale2 Scale3 Separate" style="display:none">Scale 1 Model S FNF</div> <div class="item NF FNF Scale2 Scale3 Separate" style="display:none">Scale 1 Model T F</div> <div class="item F NF Scale2 Scale3 Separate" style="display:none">Scale 1 Model T FNF</div> <div class="item NF FNF Scale2 Scale3 Integral Elcomaster" style="display:none">Model B F</div> <div class="item F FNF Scale2 Scale3 Integral Elcomaster" style="display:none">Model B NF</div> <div class="item F NF Scale2 Scale3 Integral Elcomaster" style="display:none">Model B FNF</div> <div class="item NF FNF Scale2 Scale3 Integral" style="display:none">Model S F</div> <div class="item F FNF Scale2 Scale3 Integral" style="display:none">Model S NF</div> <div class="item F NF Scale2 Scale3 Integral" style="display:none">Model S FNF</div> <div class="item NF FNF Scale2 Scale3 Integral" style="display:none">Model T F</div> <div class="item F FNF Scale2 Scale3 Integral" style="display:none">Model T NF</div> <div class="item F NF Scale2 Scale3 Integral" style="display:none">Model T FNF</div> </form> 

Answer 3

This is the code using jquery if you want to display all items when no checkbox is selected but filter items if atleast one is checked.

Notice that I put the divs inside another div with id="items" to reference them better. I also removed the display block since items are visible by default.

 $(function(){ $('input[name=c1]').change(function(){ if ($('input[name=c1]:checked').length > 0) { $('#items div').hide(); $('input[name=c1]').each(function(){ if ($(this).is(':checked')) { $('#items div.' + $(this).val()).show(); } }); } else { $('#items div').show(); } }); }); 

 <h3 align="center">What Elcometer 456 is Right for You?</h3> <form> <input type="checkbox" name="c1" value="F">Ferrous<br> <input type="checkbox" name="c1" value="NF">Non-Ferrous<br> <input type="checkbox" name="c1" value="FNF">Dual Ferrous/Non-Ferrous<br><br> <input type="checkbox" name="c1" value="Scale1">Range 0 - 60mils<br> <input type="checkbox" name="c1" value="Scale2">Range 0 - 200mils<br> <input type="checkbox" name="c1" value="Scale3">Range 0 - 500mils<br><br> <input type="checkbox" name="c1" value="Integral">Integral<br> <input type="checkbox" name="c1" value="Separate">Separate<br><br> <input type="checkbox" name="c1" value="Elcomaster">Includes Elcomaster Tech<br><br> <div id="items"> <div class="NF FNF Scale2 Scale3 Separate Elcomaster">Scale 1 Model E F</div> <div class="F NF Scale2 Scale3 Separate Elcomaster">Scale 1 Model E FNF</div> <div class="NF FNF Scale2 Scale3 Separate Elcomaster">Scale 1 Model B F</div> <div class="F FNF Scale2 Scale3 Separate Elcomaster">Scale 1 Model B NF</div> <div class="F NF Scale2 Scale3 Separate Elcomaster">Scale 1 Model B FNF</div> <div class="NF FNF Scale1 Scale3 Separate Elcomaster">Scale 2 Model B F</div> <div class="NF FNF Scale1 Scale2 Separate Elcomaster">Scale 3 Model B F</div> <div class="NF FNF Scale2 Scale3 Separate">Scale 1 Model S F</div> <div class="F NF Scale2 Scale3 Separate">Scale 1 Model S FNF</div> <div class="NF FNF Scale2 Scale3 Separate">Scale 1 Model T F</div> <div class="F NF Scale2 Scale3 Separate">Scale 1 Model T FNF</div> <div class="NF FNF Scale2 Scale3 Integral Elcomaster">Model B F</div> <div class="F FNF Scale2 Scale3 Integral Elcomaster">Model B NF</div> <div class="F NF Scale2 Scale3 Integral Elcomaster">Model B FNF</div> <div class="NF FNF Scale2 Scale3 Integral">Model S F</div> <div class="F FNF Scale2 Scale3 Integral">Model S NF</div> <div class="F NF Scale2 Scale3 Integral">Model S FNF</div> <div class="NF FNF Scale2 Scale3 Integral">Model T F</div> <div class="F FNF Scale2 Scale3 Integral">Model T NF</div> <div class="F NF Scale2 Scale3 Integral">Model T FNF</div> </div> </form> <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>