Question

您好我有一份公寓列表，我需要按类型（例如工作室，一间卧室，两间卧室）通过复选框过滤它们。你可以在http://jsfiddle.net/YByCk/1/看到演示如果你选择1卧室和2卧室来显示1和2卧室的结果，如果已经检查1，我不知道如何做到这一点。问题是，当您选中第二个复选框时，仅显示最后一个复选框过滤器，也不会保留选中的其他复选框。

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

任何想法？

谢谢

Answer 1

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

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。

修改

我摆弄了一些，并想出了这个：

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

我认为它更优雅，如果没有选中复选框，现在会显示所有列表。 Example here

Answer 2

为什么不首先隐藏所有内容，然后展示您感兴趣的内容，而不是做你正在做的事情并隐藏房间？将click事件与整个复选框绑定，然后循环显示它们，显示与复选框匹配的房间。

<强> Try this jsFiddle

这是使元素隐藏或可见的jQuery：

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

请注意，除了新的jQuery之外，为了使其工作，我修改了列表的HTML，以便卧室属性与您的复选框的ID相匹配。因此，不是您的房源列表具有bedrooms="2 Bedroom"等属性，而是具有属性bedrooms="2B"（工作室保持不变）。另请注意，ID不应该以数字开头，我只是在我的示例中保留它们以最小化代码更改。您可以轻松地将它们从1B，2B，3B等更改为B1，B2，B3等。

Answer 3

首先使用参数启动一个函数：

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

给所有过滤器复选框添加相同的类...然后你可以用它的参数调用该函数：

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

编辑：不要覆盖你的列表我编辑了我的答案..为你

Answer 4

我没有深入了解实际问题。但这是我尝试为您从代码中理解的内容提供解决方案。如果我错了，请纠正我：）

工作示例：http://jsfiddle.net/ylokesh/YByCk/10/

更改：我所做的是使DIV ID与复选框ID相同。它将匹配特定ID并显示匹配的DIV。

此外，最初将一个css规则应用于“display：none”所有列表div。可能需要传递checked对象以在页面上显示默认结果，然后在document.ready上执行一些操作。希望！

Jquery筛选器列表DIV通过复选框

4 个答案: