如何基于多个类元素显示隐藏div

Question

我正在尝试创建一段“缩小”代码以在电子商务网站上实施。这个想法是，通过选中/取消选中框，将向用户显示适合产品的链接。到目前为止，我的代码除了选中多个框然后取消选中它们不允许所有 div 重新出现之外。

    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

你可以使用for loop:

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

Answer 2

我在每个 div 中添加了 item 类，以便我可以使用类

$(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

这是使用 jquery 的代码，如果您想在未选中复选框时显示所有项目，但如果选中至少一个则过滤项目。

请注意，我将 div 放在另一个 id="items" 的 div 中，以便更好地引用它们。我还删除了显示块，因为默认情况下项目是可见的。

$(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>