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

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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!