Jquery Filter List DIVs via checkboxes

Question

Hello i have a list of apartments and i need to filter them by type (eg studio, 1 bedroom, 2 bedroom . ) via checkboxes. You could see the demo at http://jsfiddle.net/YByCk/1/ I don't know how to make this if you select for example 1 Bedrooms and 2 Bedrooms to show results for 1 and 2 bedrooms if 1 is already checked. The problem is when you check second checkbox will show only last checkbox filter, won't keep also the other checkboxes selected.

//function count results after filter
 function divcount()
 {
     var resCount =  $('.listing').filter(":visible").size();
     //alert(resCount)
     $("#contResults").html(resCount + ' results');
 }
  //bedrooms filter

$("#Studio").click(function(){
 if($("#Studio").is(':checked'))
       {              
         $('.listing[bedrooms!="Studio"]').hide();
         divcount();             
       }
  if(!$("#Studio").is(':checked'))
       {              
        $('.listing[bedrooms!="Studio"]').show();
        divcount();    
       }       
   });

$("#1B").click(function(){
 if($("#1B").is(':checked'))
       {              
         $('.listing[bedrooms!="1 Bedroom"]').hide();
         divcount();         
       }
  if(!$("#1B").is(':checked'))
       {              
        $('.listing[bedrooms!="1 Bedroom"]').show();
        divcount();        
       }       
   });

$("#2B").click(function(){
 if($("#2B").is(':checked'))
       {              
         $('.listing[bedrooms!="2 Bedroom"]').hide();
         divcount();             
       }
  if(!$("#2B").is(':checked'))
       {              
        $('.listing[bedrooms!="2 Bedroom"]').show();
        divcount();    
       }       
   });

$("#3B").click(function(){
 if($("#3B").is(':checked'))
       {              
         $('.listing[bedrooms!="3 Bedroom"]').hide();
         divcount();             
       }
  if(!$("#3B").is(':checked'))
       {              
        $('.listing[bedrooms!="3 Bedroom"]').show();
        divcount();    
       }       
   });
$("#4B").click(function(){
 if($("#4B").is(':checked'))
       {              
         $('.listing[bedrooms!="4 Bedroom"]').hide();
         divcount();             
       }
  if(!$("#4B").is(':checked'))
       {              
        $('.listing[bedrooms!="4 Bedroom"]').show();
        divcount();    
       }       
   });
$("#5B").click(function(){
 if($("#5B").is(':checked'))
       {              
         $('.listing[bedrooms!="5 Bedroom"]').hide();
         divcount();             
       }
  if(!$("#5B").is(':checked'))
       {              
        $('.listing[bedrooms!="5 Bedroom"]').show();
        divcount();    
       }       
   });

any ideas?

Thank you

It is doing what you told it to do. You should make an apply filter function that gets called whenever any checkbox is clicked. Then check the state of each checkbox and hide/show the appropriate values. — Kory Hodgson
– Kory Hodgson, Commented Feb 7, 2012 at 16:52

magicalex · Accepted Answer · 2012-02-08 06:42:37Z

I've simplified your code and used data attributes for storing number of bedrooms.

HTML

<input data-bedrooms="1" type="checkbox">1 bedroom<br>
<input data-bedrooms="2" type="checkbox">2 bedrooms<br>
<input data-bedrooms="3" type="checkbox">3 bedrooms<br>
<ul>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="3">3 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="3">3 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
    <li data-bedrooms="1">1 bedroom apartment</li>
    <li data-bedrooms="2">2 bedroom apartment</li>
</ul>

JQUERY

$('input').change(function(){
    $('input').each(function(){
        var checked = $(this).attr('checked') || false;
        var numberofrooms = $(this).data('bedrooms');
        $('li').each(function(){
            if ($(this).data('bedrooms')==numberofrooms){
                checked ? $(this).show() : $(this).hide();
            }
        });
    });
});

And that's pretty much it. Check out the jsfiddle.

EDIT

I fiddled around some more, and came up with this:

$('input').change(function(){
    var allchecked=0;
    $('input').each(function(){
        var checked;
        if (checked = $(this).attr('checked')) {allchecked++};
        var numberofrooms = $('li[data-bedrooms='+$(this).data('bedrooms')+']');
        checked ?  numberofrooms.show('slow'): numberofrooms.hide('slow');
    });
    if(allchecked==0){$('li').show('slow');}
});

I think it's more elegant, and all listings will now be shown if no checkboxes are checked. Example here.

thank you , i still have some problems posted here:stackoverflow.com/questions/9186201/…

j08691 · Accepted Answer · 2012-02-07 17:52:28Z

1

Instead of doing what you're doing and hiding rooms if they aren't equal to something, why don't you just hide everything first, and then show the one(s) you're interested in? Tie the click event to the checkboxes as a whole, then just loop through them, showing the rooms that match the checked boxes.

Try this jsFiddle

This is the jQuery that makes the elements hidden or visible:

$('input').click(function() {
    $('.listing').hide();
    $('input').each(function(index) {
        if ($(this).is(':checked')) {
            $('.listing[bedrooms="' + $(this).attr('id') + '"]').show();
        }
    });
});

Note that to make this work, aside from new jQuery, I modified your HTML for the listings so that the bedroom attribute matched the ID of your checkboxes. So instead of your room listings having an attribute like bedrooms="2 Bedroom", they have the attribute bedrooms="2B" (studio remains the same). Also note that IDs should never begin with a number and I just kept them that way in my example to minimize code changes. You could easily change them from 1B, 2B, 3B, etc. to B1, B2, B3, etc.

answered Feb 7, 2012 at 17:52

j08691

208k33 gold badges269 silver badges281 bronze badges

1 Comment

Teodor Over a year ago

Thank you is working but it seems more straight the answer from magicalex , hovewer i add +1 thank you very much, i learned something today

Lokesh Yadav · Accepted Answer · 2012-02-07 17:20:38Z

0

I did not get the insight of the actual problem. But here is my try to provide a solution for what ever i understand from your code. Please correct me if i am wrong somewhere :)

working example: http://jsfiddle.net/ylokesh/YByCk/10/

Changes: what i have done is to make the DIV ID same as checkbox ID. where it will match the particular ID and show the matched DIV.

Also, apply one css rule to "display:none" all the listing div initially. May be you need to pass the checked object to show the default results on the page and then do some stuff on document.ready. Hopefully!

answered Feb 7, 2012 at 17:20

Lokesh Yadav

1,6025 gold badges25 silver badges50 bronze badges

Comments

ggzone · Accepted Answer · 2012-02-07 17:25:38Z

0

first start make a function with parameters:

function roomFilter (checkbox, room) {
 if(!$(checkbox).is(':checked')) {              
   $('.listing[bedrooms!="'+room+'"]').hide();
   divcount();
}

give all filter checkboxes addionally the same class... then you can call the function with its params:

$('.checkbox-filters').each(function(){
  roomFilter(??1, ??2);
  // i dont know where your "1B" or "1 Bedroom" is coming from
  // if "1B" is your checkbox value instead "??1" paramater insert $(this).val()
  // if "1 Bedroom" is the label do instead "??2" parameter $(this).closest('label').text()
});

edit: to not overide your listings i edited my answer.. for you

edited Feb 7, 2012 at 17:25

answered Feb 7, 2012 at 17:15

ggzone

3,7198 gold badges39 silver badges59 bronze badges

Collectives™ on Stack Overflow

Jquery Filter List DIVs via checkboxes

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related