How to show-hide div based on multiple class elements

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>