javascript - 使用复选框过滤结果

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)