我正在使用以下代码通过使用复选框来筛选我的结果。它显示已在共同检查的项目的结果：使用复选框筛选结果

$('input').change(function() { 

    var room_array = new Array(), 
     loc_array = new Array(); 
    $('.br').each(function() { 
     if ($(this).is(':checked')) { 
      room_array.push($(this).data('bedrooms')); 
     } 
    }); 
    $('.loc').each(function() { 
     if ($(this).is(':checked')) { 
      loc_array.push($(this).data('location')); 
     } 
    }); 
    //console.log(loc_array, room_array); 
    $('li').each(function() { 
     if ($.inArray($(this).data('location'), loc_array) > -1 && $.inArray($(this).data('bedrooms'), room_array) > -1) { 
      $(this).show(); 
     } else { 
      $(this).hide(); 
     } 
    }); 
});

<input data-bedrooms="1" class="br" type="checkbox">1 bedroom<br> 
<input data-bedrooms="2" class="br" type="checkbox">2 bedrooms<br> 
<input data-bedrooms="3" class="br" type="checkbox">3 bedrooms<br><br> 

<input data-location="london" class="loc" type="checkbox">london<br> 
<input data-location="new-york" class="loc" type="checkbox">new york<br> 
<input data-location="paris" class="loc" type="checkbox">paris<br><br>  

<ul> 
    <li data-bedrooms="1" data-location="paris">1 bedroom apartment paris</li> 
    <li data-bedrooms="1" data-location="paris">1 bedroom apartment</li> 
     <! -- similar combinations --> 
    <li data-bedrooms="2" data-location="new-york">2 bedroom apartment new yor</li> 
</ul>

JSFiddle

的问题是，当仅选择1型复选框，别结果为复选框t显示。

但是，我想只允许选择一种类型，例如，卧室的数量或位置。我怎样才能做到这一点？

来源

2012-08-01 Justin Meli

编号建议你改变你的代码，以便对结果的数据存储为JavaScript，然后那意思就是HTML与简单的功能，这将让你轻松地过滤结果。 – Luka 2012-08-01 14:50:10

更换

if ($.inArray($(this).data('location'), loc_array) > -1 && $.inArray($(this).data('bedrooms'), room_array) > -1) {

随着

if (($.inArray($(this).data('location'), loc_array) > -1 || !$('.loc:checked').length) && ($.inArray($(this).data('bedrooms'), room_array) > -1 || !$('.br:checked').length)) {

当该组没有选中复选框时接受任何组的值。

顺便说一句，你的提琴有两个条目

<li data-bedrooms="2" data-location="paris">2 bedroom apartment paris</li>

我改变了他们的一个london作为你的第一个例子建议。

jsFiddle

来源

2012-08-01 14:51:49

此行

if ($.inArray($(this).data('location'), loc_array) > -1 && $.inArray($(this).data('bedrooms'), room_array) > -1)

应该

if ($.inArray($(this).data('location'), loc_array) > -1 || $.inArray($(this).data('bedrooms'), room_array) > -1)

来源

2012-08-01 14:50:58 malificent

这将导致显示的条目过多：http://jsfiddle.net/YEtgM/16/。 – Zeta 2012-08-01 14:54:52

怎么这样？你能举出证明这一点的例子吗？ – malificent 2012-08-01 15:01:06

检查“1间卧室”和“巴黎”。它应该只有两个“巴黎一居室公寓”的参赛作品，但它也显示了伦敦和巴黎的一些“两居室公寓”。 – Zeta 2012-08-01 15:04:22

使用复选框筛选结果

回答

jsFiddle

相关问题