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

问题描述

我有一个具有多个数据属性的div结构，如data-location，data-name。
我想根据我的代码中定义的位置和名称复选框过滤显示的div。
如果我从位置复选框检查一些位置，它应该只显示那些位置divs.and名称复选框
但是当我选择名称和位置，两者，那么它应该比较两者，并显示我

I am having a div structures with multiple data attributes like data-location,data-name.I want to filter the displayed divs on basis of location and name checkboxes defined in my code.Like if i check some location from location checkboxes,it should show only those location divs.and same for name checkboxesBut when i select name and location both,then it should compare the both and show me the divs combining the both.

<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结果divs.and如果我选择仅美国位置div，它应该只给美国相关的divs所有名称
如果我选择彼得和美国复选框，那么应该给只有彼得与位置美国结果divs。

So if i select Peter checkbox only,it should show all peter resulted divs.and if i select US location div only,it should give only US related divs with all namesif i select Peter and US checkbox,then it should give Only Peter with location US resulted divs.

推荐答案

请查看此
jquery

check this Updated Demo on jsfiddlejquery

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

});

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

and in CSS you need to set display to make all content hide

.content{
display:none;
}

这篇关于使用具有多个复选框的数据属性过滤div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！