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

【问题标题】：Hide Show divs with 2 different category checkboxes隐藏显示具有 2 个不同类别复选框的 div
【发布时间】：2018-03-14 07:07:08
【问题描述】：

我有点编程新手，我正在尝试找出如何按 2 个类别过滤 div。就像在过滤我们欧盟时它可以工作，但下一个剂量工作我该怎么做？

脚本

 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>

做了一个小提琴来表达我的意思。小提琴：https://jsfiddle.net/xtg7a22g/14/

任何帮助将不胜感激！

最好的问候！

【问题讨论】：

标签： html checkbox filter hide show

【解决方案1】：

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

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

这样就可以了：

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

【讨论】：