通过复选框的jQuery过滤器列表DIV [英] Jquery Filter List DIVs via checkboxes

问题描述

你好，我有一个公寓清单，我需要通过复选框按类型(例如，工作室，1间卧室，2间卧室)过滤它们. 您可以在 http://jsfiddle.net/YByCk/1/上看到该演示. 如果您选择1卧室和2卧室来显示1卧室和2卧室的结果(如果已选中1卧室)，我将不知道如何进行设置. 问题是，当您选中第二个复选框时，只会显示最后一个复选框过滤器，而不会同时选中其他复选框.

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();    
       }       
   }); 

有什么想法吗?

谢谢

推荐答案

我简化了您的代码，并使用data属性存储了卧室的数量.

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();
            }
        });
    });
});

就足够了.查看 jsfiddle .

编辑

我摆弄一些，然后想到了:

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.

这篇关于通过复选框的jQuery过滤器列表DIV的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！