jsFiddle

Question

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

$('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

问题是，当只选择了一种类型的复选框时，不会显示该复选框的结果。

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

Answer 1

替换

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

Answer 2

这一行

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)

使用复选框筛选结果

2 个答案:

jsFiddle