如何根据多个类元素显示隐藏div

时间：2015-01-28 15:04:32

标签： javascript jquery checkbox show-hide

我试图创造一个缩小范围＆＃34;在电子商务网站上实施的一段代码。我们的想法是，通过选中/取消选中框，将向用户显示适合的产品的链接。到目前为止，我的代码工作的例外是检查多个框然后取消选中它们并不允许重新出现所有div。

＆＃13;
＆＃13; 
    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;
    }
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：0)

您可以使用for loop：

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

答案 1 :(得分：0)

我为每个div添加了课程item，因此我可以使用课程

＆＃13;
＆＃13; 
$(document).ready(function() {
    $('input[type=checkbox]').on('change', function() {
        $('.item ').hide();
        $('input[type=checkbox]:checked').each(function() {
            var value = $(this).attr('value');
            $('.' + value).show();
        });
    });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

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

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

＆＃13;
＆＃13; 
$(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();
        }
    });
});
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题