使用復選框篩選結果

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)