Question

我有一个具有多个数据属性的div结构，例如data-location，data-name。我想根据我的代码中定义的位置和名称复选框过滤显示的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

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

Answer 1

我猜你没有别的选择，只要在每次有checkbox事件时迭代所有已检查 change并隐藏/显示div因此我会这样做：

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

注意：

您可以使用类而不是input[type=checkbox]元素
.on()需要jQuery 1.7 +

Answer 2

试试这个

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

Answer 3

检查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;
}

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

3 个答案: