使用多个复选框过滤具有数据属性的 div

Question

我有一个具有多个数据属性的 div 结构，例如数据位置、数据名称。 我想根据我的代码中定义的位置和名称复选框过滤显示的 div。 就像我从位置复选框中检查某个位置一样，它应该只显示那些位置 div。对于名称复选框也是如此 但是当我同时选择名称和位置时，它应该比较两者并向我显示结合两者的 div。

<div class="content" data-name="Peter" data-location="US">Peter</div><br />
<div class="content" data-name="Willy" data-location="Mexico">Willy</div><br />
<div class="content" data-name="Roche" data-location="US">Roche</div><br />
<div class="content" data-name="George" data-location="Canada">George</div><br />
<div class="content" data-name="Pedro" data-location="Mexico">Pedro</div><br />

<input type="checkbox" name="name" id="Peter">Peter
<input type="checkbox" name="name" id="Willy">Peter
<input type="checkbox" name="location" id="US">US
<input type="checkbox" name="location" id="Mexico">US

所以如果我只选择 Peter 复选框，它应该显示所有由 Peter 产生的 div。如果我只选择美国位置 div，它应该只给出与美国相关的所有名称的 div 如果我选择彼得和美国复选框，那么它应该只给彼得与位置美国结果 div。

Answer 1

检查这个Updated Demo on jsfiddle jQuery

$('div>').change(function() {
$(".content").hide();
    if($(this).is(":checked")) {          
       $(".content[data-name="+this.id+"]").show();
       $(".content[data-location="+this.id+"]").show();    
    }

});

在 CSS 中，您需要设置显示以隐藏所有内容

.content{
display:none;
}

Answer 2

我想您别无选择，只能在每次出现 change 事件时遍历所有 已检查 checkbox 并相应地隐藏/显示 divs 所以我会这样做：

jQuery(document).ready(function ($) {
    $("input[type=checkbox]").on("change", function () {
        if ($("input[type=checkbox]:checked").length == 0) {
            // no one is checked so show all
            $(".content").show();
        } else {
            // there is at least one checked
            $(".content").fadeOut(0); // hide all (again)
            // show only each of those that match
            $("input[type=checkbox]:checked").each(function () {
                $(".content[data-name=" + this.id + "]").fadeIn(100);
                $(".content[data-location=" + this.id + "]").fadeIn(100);
            }); // each
        };
    }); // on
}); // ready

JSFIDDLE

注意事项：

• 您可以使用 class 代替 input[type=checkbox] 元素
• .on() 需要 jQuery 1.7+

Answer 3

试试这个

$("input[type=checkbox]").click(function(){
$(".content").hide();
$(".content[data-name="+this.id+"]").show();
$(".content[data-location="+this.id+"]").show();

});

demo

编辑

 $(".content").hide();
 $("input[type=checkbox]").click(function () {

 if (this.checked) {
     $(".content[data-name=" + this.id + "]").show();
     $(".content[data-location=" + this.id + "]").show();
 } else {
     $(".content[data-name=" + this.id + "]").hide();
     $(".content[data-location=" + this.id + "]").hide();
 }
 });

Updated fiddle