TechQA.

How to filter HTML5 data-attribute elements via checkboxes using JQuery

416 views Asked by At

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.

JSFiddle

   $(".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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>&nbsp;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>
jquery html jquery-ui checkbox jquery-filter
Original Q&A
1

There are 1 answers

0
sridharnetha On

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');

});

Related Questions in JQUERY

Related Questions in HTML

Related Questions in JQUERY-UI

Related Questions in CHECKBOX

Related Questions in JQUERY-FILTER

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions