隐藏显示带有 2 个不同类别复选框的 div

Question

我是编程方面的菜鸟，我正在尝试弄清楚如何按 2 类过滤 div。就像过滤 us eu 时它有效，但下一个剂量起作用，我该怎么做？

脚本

 var sections = $('.sectionContent');
function updateContentVisibility(){
    var checked = $("#filterControls :checkbox:checked");
    if(checked.length){
        sections.fadeOut(400);
        checked.each(function(){
            $("." + $(this).val()).fadeIn(600);
        });
    } else {
        sections.fadeIn(500);
    }
}

$("#filterControls :checkbox").click(updateContentVisibility);
updateContentVisibility();

});

HTML

 <div id="filterControls">
        <h3>Buy With: </h3>
            <label><input type="checkbox" value="cash" name="cash" class="check"/> Cash</label>
            <label><input type="checkbox" value="card" name="card" class="check"/> CreditCard</label>


            <label><input type="checkbox" value="us" name="us" class="check"/> us</label>
            <label><input type="checkbox" value="eu" name="eu" class="check"/> eu</label>
        </div>

        <div class="container">


        <div class=" box sectionContent us cash">
        <p>
        us cash
        </p>
        </div>

        <div class=" box sectionContent eu card">
        <p>
        Eu Card
        </p>
        </div>

        <div class=" box sectionContent us card">
        <p>
      us card
        </p>
        </div>

        <div class=" box sectionContent eu cash">
        <p>
        eu cash
        </p>
        </div>
        </div>

做了一个 fiddle 来说明我的意思。 Fiddle: https://jsfiddle.net/xtg7a22g/14/

如有任何帮助，我们将不胜感激！

此致！

Answer 1

你实际工作得很好......如果你想要 OR 逻辑，也就是说，如果你想显示匹配 any 复选框的所有内容。

不过，大概您想要 AND 逻辑，选择必须匹配所有个选中的复选框。

这会做到：

    var classes = '';
    checked.each(function(){
        classes += "." + $(this).val();
    });
    $(classes).fadeIn(600);

隐藏显示带有 2 个不同类别复选框的 div

Hide Show divs with 2 different category checkboxes

html

checkbox

filter

show

hide