How to filter HTML5 data-attribute elements via checkboxes using JQuery
Question
In my listing wrapper each product has multiple data-attributes like data-baths="3" , data-beds="4" , data-halfbath="12" , data-garages="2" , data-stories="2" , data-price="2" , data-sqft="2567" .
I have checkboxes that has a category corresponding to the data-category="value" here value may be baths/ beds/ halfbath/ garages/ stories/ price/ sqft like
<input type=’checkbox’ class=’filter’ data-filter=’baths’ value=’1’> 1 Bathroom
<input type=’checkbox’ class=’filter’ data-filter=’beds’ value=’2’> 2 Bedrooms
So when a user selects checkboxes I need to only display the products based on the category.
Problem is, if I choose multiple categories (checkbox values) it is missing some criteria and displaying unconditional data.
$(".filter").change(function(){
var beds=[],baths=[],halfbaths=[],garages=[],stories=[];
$('.filter').each(function(){
if($(this).is(':checked')){
currentValue=$(this).val();
if($(this).attr('data-filter')==='beds'){
if($.inArray(currentValue, beds) == -1){beds.push(currentValue);}
}
if($(this).attr('data-filter')==='baths'){
if($.inArray(currentValue, baths) == -1){baths.push(currentValue);}
}
if($(this).attr('data-filter')==='halfbath'){
if($.inArray(currentValue, halfbaths) == -1){halfbaths.push(currentValue);}
}
if($(this).attr('data-filter')==='garages'){
if($.inArray(currentValue, stories) == -1){stories.push(currentValue);}
}
if($(this).attr('data-filter')==='stories'){
if($.inArray(currentValue, stories) == -1){stories.push(currentValue);}
}
}
else{
currentValue=$(this).val();
if($(this).attr('data-filter')=='beds'){
beds = $.grep(beds, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='baths'){
baths=$.grep(baths, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='halfbath'){
halfbaths=$.grep(halfbaths, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='garages'){
garages=$.grep(garages, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='stories'){
stories=$.grep(stories, function(b) {return b != currentValue;});
}
}
});
var bedsselector=[], bathsselector=[], halfbathssselector=[], garagesselector=[], storiessselector=[];
if(beds){
$(beds).each(function(index,value){
bedsselector.push('[data-beds='+value+']');
});
//console.log('.listing-wrap'+bedsselector.join(','));
}
if(baths){
$(baths).each(function(index,value){
bathsselector.push('[data-baths='+value+']');
});
//console.log('.listing-wrap'+bathsselector.join(','));
}
if(halfbaths){
$(halfbaths).each(function(index,value){
halfbathssselector.push('[data-halfbath='+value+']');
});
//console.log('.listing-wrap'+halfbathssselector.join(''));
}
if(garages){
$(garages).each(function(index,value){
garagesselector.push('[data-garages='+value+']');
});
//console.log('.listing-wrap'+garagesselector.join(''));
}
if(stories){
$(stories).each(function(index,value){
storiessselector.push('[data-stories='+value+']');
});
//console.log('.listing-wrap'+storiessselector.join(''));
}
console.log('.listing-wrap'+bedsselector.join(',')+bathsselector.join(','));
$(".listing-wrap").hide();
console.log($('.listing-wrap').filter(bathsselector.join()));
$('.listing-wrap'+bathsselector.join()).show('slow');
});
clearfilter=function(){
$('.filter').attr('checked',false);
$(".listing-wrap").show("slow");
}
Here is my HTML:
<div class="col col-sm-3 col-md-3">
<div class="clear_btn_section"><button class="btn btn-default " onclick="clearfilter();">Clear Filter</button></div>
<div class="clearfix clear-fix"></div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i> Bedrooms</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="beds" value="1"/> <span> 1 Bedroom</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="2"/> <span> 2 Bedrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="3"/> <span> 3 Bedrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="4"/> <span> 4 Bedrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="5"/> <span> 5 Bedrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="beds" value="6"/> <span> 6 Bedrooms</span></label>
</div>
</div>
</div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i> Bathrooms</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="baths"/ value="1"> <span>1 Bathroom</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="2"> <span>2 Bathrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="3"> <span>3 Bathrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="4"> <span>4 Bathrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="5"> <span>5 Bathrooms</span></label>
<label><input type="checkbox" class="filter" data-filter="baths"/ value="6"> <span>6 Bathrooms</span></label>
</div>
</div>
</div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i> Halfbath</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="1"><span> 1 Halfbath</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="2"><span> 2 Halfbaths</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="3"><span> 3 Halfbaths</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="4"><span> 4 Halfbaths</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="5"><span> 5 Halfbaths</span></label>
<label><input type="checkbox" class="filter" data-filter="halfbath"/ value="6"><span> 6 Halfbaths</span></label>
</div>
</div>
</div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i> Garages</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="garages" value="1"/><span> 1 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="2"/><span> 2 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="3"/><span> 3 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="4"/><span> 4 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="5"/><span> 5 Cars</span></label>
<label><input type="checkbox" class="filter" data-filter="garages" value="6"/><span> 6 Cars</span></label>
</div>
</div>
</div>
<div class="filter_models">
<div class="panel panel-default">
<div class="panel-heading"><i class="fa fa-filter"></i> Stories</div>
<div class="panel-body">
<label><input type="checkbox" class="filter" data-filter="stories"/ value="1"><span> 1 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="2"><span> 2 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="3"><span> 3 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="4"><span> 4 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="5"><span> 5 Stories</span></label>
<label><input type="checkbox" class="filter" data-filter="stories"/ value="6"><span> 6 Stories</span></label>
</div>
</div>
</div>
<div class="clearfix clear-fix"></div>
</div>
<div class="wp-listings-shortcode col col-sm-8 col-md-8">
<div data-baths="3" data-beds="4" data-halfbath="12" data-garages="2" data-stories="2" data-price="2" data-sqft="2567" class="listing-wrap one-third first col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Lexington</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">4<span>Beds</span></li>
<li class="baths">3<span>Baths</span></li>
<li class="baths">12<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,567<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">2<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="4" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2701" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Everest</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">4<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,701<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2126" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Fairmont</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,126<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="2" data-price="" data-sqft="3732" class="listing-wrap one-third first col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Elkton</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">3,732<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">2<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="1784" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Belmont</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">1,784<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="1698" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Audrey</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">1,698<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="3" data-stories="1" data-price="" data-sqft="3450" class="listing-wrap one-third first col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Aspen</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">3,450<span>Sqft Footage</span></li>
<li class="baths">3<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="3" data-beds="5" data-halfbath="-" data-garages="2" data-stories="2" data-price="" data-sqft=" 3718" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Alpine</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">5<span>Beds</span></li>
<li class="baths">3<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">3,718<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">2<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="" data-sqft="2195" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Alexander</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,195<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="2" data-beds="3" data-halfbath="-" data-garages="2" data-stories="1" data-price="1000" data-sqft="2100" class="listing-wrap one-third first col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Camden</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">2<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">2,100<span>Sqft Footage</span></li>
<li class="baths">2<span>Garages</span></li>
<li class="baths">1<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="4" data-beds="3" data-halfbath="-" data-garages="-" data-stories="-" data-price="100" data-sqft="50" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">model two</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">3<span>Beds</span></li>
<li class="baths">4<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">50<span>Sqft Footage</span></li>
<li class="baths">-<span>Garages</span></li>
<li class="baths">-<span>Stories</span></li>
</ul>
</div>
</div>
<div data-baths="-" data-beds="-" data-halfbath="-" data-garages="-" data-stories="-" data-price="" data-sqft="452136" class="listing-wrap one-third col col-md-3 col-sm-3">
<div class="listing-widget-details">
<h3 class="listing-title">Model One</h3>
<ul class="listing-beds-baths-sqft">
<li class="beds">-<span>Beds</span></li>
<li class="baths">-<span>Baths</span></li>
<li class="baths">-<span>HalfBaths</span></li>
</ul>
<ul class="listing-beds-baths-sqft">
<li class="beds">452,136<span>Sqft Footage</span></li>
<li class="baths">-<span>Garages</span></li>
<li class="baths">-<span>Stories</span></li>
</ul>
</div>
</div>
</div>
1 answers
solution1
0 2016-10-18 12:51:22
I got the solution and I am answering to my own question, because this logic may helpfull to someone.
Updated JSFiddle with fully functional code.
Another solution with simple code JSFiddle
Here is JQuery:
jQuery(document).ready(function($){
$(".filter").change(function(){
filterData();
});
clearfilter=function(){
$('.filter').attr('checked',false);
$(".listing-wrap").show("slow");
}
filterData=function(){
var beds=[],baths=[],halfbaths=[],garages=[],stories=[];
$('.filter').each(function(){
if($(this).is(':checked')){
currentValue=$(this).val();
if($(this).attr('data-filter')==='beds'){
if($.inArray(currentValue, beds) == -1){beds.push(currentValue);}
}
if($(this).attr('data-filter')==='baths'){
if($.inArray(currentValue, baths) == -1){baths.push(currentValue);}
}
if($(this).attr('data-filter')==='halfbath'){
if($.inArray(currentValue, halfbaths) == -1){halfbaths.push(currentValue);}
}
if($(this).attr('data-filter')==='garages'){
if($.inArray(currentValue, garages) == -1){garages.push(currentValue);}
}
if($(this).attr('data-filter')==='stories'){
if($.inArray(currentValue, stories) == -1){stories.push(currentValue);}
}
}
else{
currentValue=$(this).val();
if($(this).attr('data-filter')=='beds'){
beds = $.grep(beds, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='baths'){
baths=$.grep(baths, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='halfbath'){
halfbaths=$.grep(halfbaths, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='garages'){
garages=$.grep(garages, function(b) {return b != currentValue;});
}
if($(this).attr('data-filter')=='stories'){
stories=$.grep(stories, function(b) {return b != currentValue;});
}
}
});
console.log("Beds:"+beds);
console.log("Baths:"+baths);
console.log("Halfbaths:"+halfbaths);
console.log("Garages:"+garages);
console.log("Stories:"+stories);
console.log("-----------------------");
$('.listing-wrap').hide();
$('.listing-wrap').each(function(){
var this_beds=$(this).attr('data-beds');
var this_baths=$(this).attr('data-baths');
var this_halfbaths=$(this).attr('data-halfbath');
var this_garages=$(this).attr('data-garages');
var this_stories=$(this).attr('data-stories');
//console.log(baths.length);
console.log($.inArray(this_beds,beds));
var isbeds=beds.length===0?true:($.inArray(this_beds,beds)>=0);
var isbaths=baths.length===0?true:($.inArray(this_baths,baths)>=0);
var ishalfbaths=halfbaths.length===0?true:($.inArray(this_halfbaths,halfbaths)>=0);
var isgarages=garages.length===0?true:($.inArray(this_garages,garages)>=0);
var isstories=stories.length===0?true:($.inArray(this_stories,stories)>=0);
console.log("Beds:"+isbeds+",Baths:"+isbaths+",Halfbaths:"+ishalfbaths+",Garages:"+isgarages+",Stories:"+isstories);
console.log("Beds("+this_beds+"):"+isbeds+",Baths("+this_baths+"):"+isbaths+",Halfbaths("+this_halfbaths+"):"+ishalfbaths+",Garages("+this_garages+"):"+isgarages+",Stories("+this_stories+"):"+isstories);
var isdisplay=(isbeds&&isbaths&&ishalfbaths&&isgarages&&isstories);
console.log("Release="+isdisplay);
console.log("-----");
if((isdisplay)){
$(this).show("slow");
}
//else{
// $(this).hide("slow");
//}
});
}
});
Here is another solution with simple code:
$('.filter').change(function() {
var beds = $('[data-filter="beds"]:checked').map(function() {
return '[data-beds="' + $(this).val() + '"]';
}).get().join(',') || '*';
var baths = $('[data-filter="baths"]:checked').map(function() {
return '[data-baths="' + $(this).val() + '"]';
}).get().join(',') || '*';
var halfbaths = $('[data-filter="halfbaths"]:checked').map(function() {
return '[data-halfbaths="' + $(this).val() + '"]';
}).get().join(',') || '*';
var garages = $('[data-filter="garages"]:checked').map(function() {
return '[data-garages="' + $(this).val() + '"]';
}).get().join(',') || '*';
var stories = $('[data-filter="stories"]:checked').map(function() {
return '[data-stories="' + $(this).val() + '"]';
}).get().join(',') || '*';
console.log(beds + '|' + baths + '|' + halfbaths + '|' + garages + '|' + stories);
$('.listing-wrap').hide().filter(beds).filter(baths).filter(halfbaths).filter(garages).filter(stories).show('slow');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How to filter options by data-attribute with jQuery?
jQuery 1.8.1 data() error retrieving HTML5 data-attribute
jQuery: filtering a table by text or HTML5 data-attribute
Filter elements on data-attribute instead of class in jQuery
Change a html5 Data-Attribute
Filter div Content by data-attribute with Checkbox using JQuery
Using jquery to find elements with data-attribute that has a specific value?
Using jQuery to select first elements with distinct data-attribute
jQuery How to filter an object array based on the value of a data-attribute?
How to grab elements by data-attribute with JavaScript / jQuery
Related Tags