Jquery篩選器複選框陣列

我只是想使用jQuery進行復選框數組過濾。當只選擇一個複選框時它工作正常，但當我選擇兩個或多個複選框時，它不會顯示所有的div。你能幫我找到我的錯誤嗎？Jquery篩選器複選框陣列

http://jsfiddle.net/EducateYourself/vr8noyyL/19/

<div id="filters"> 
    <div class="filterblock"> 
     <input id="check1" type="checkbox" name="check" value="cola" class="category"> 
     <label for="check1">Cola</label> 
    </div> 
    <div class="filterblock"> 
     <input id="check2" type="checkbox" name="check" value="fanta" class="category"> 
     <label for="check2">Fanta</label> 
    </div> 
    <div class="filterblock"> 
     <input id="check3" type="checkbox" name="check" value="sprite" class="category"> 
     <label for="check3">Sprite</label> 
    </div> 
</div>

來源

2015-11-02 EducateYourself

是否要使用*和*（具有所有選定標記的div）或使用*或*（具有所選標記之一的div）進行過濾？ – Anders

我想過濾使用OR（至少有一個選定的標籤的div） – EducateYourself

我剛剛更新了jsfiddle鏈接 – EducateYourself

使用jQuery的filter()方法，使用.data()代替.attr()：

$(document).ready(function() { 
    $('.category').on('change', function() { 
     //select all target elements, hide them, and filter .... 
     $('.resultblock').hide().filter(function() { 
      //initialize flag 
      var found = -1; 
      //save reference to current element for use in .each 
      var that = $(this); 
      //check if current element has any of the checked tags 
      $(':checkbox[name=check]:checked').each(function() { 
       if(that.data('tag').split(' ').indexOf(this.value) > -1) { 
        //set flag 
        found = 1; 
        //exit .each, no more iterations needed 
        return false; 
       } 
      }); 
      //only elements where found is set to 1 would be returned 
      return found > -1; 
     //show elements in result set 
     }).show(); 
    }); 
});

DEMO 1

而且，如果你想要的頁面能夠正確開始 - 沒有顯示爲無標籤複選框被選中 - 只需在頁面加載時觸發change事件。

 .... 
     //show elements in result set 
     }).show(); 
    }).change(); //<<<<---- 
});

DEMO 2

UPDATE

爲了選擇所有和選擇無既表明了一切，更新DEMO 1，如下所示：

  .... 
      }).length > 0 || (found = 1); //<<<<<--- 
      return found > -1; 
     }).show(); 
    }); 
});

DEMO 3

來源

2015-11-02 17:15:59 PeterKA

非常感謝你的幫助！演示1對我來說可以。唯一的問題是，當我取消選中所有複選框時，它不顯示任何內容，但我希望它顯示所有的div。 – EducateYourself

請看看DEMO 3. – PeterKA

看起來我的代碼在編輯後也能正常工作（請檢查新的jsfiddle）。在過濾它們之前，我只隱藏所有的div – EducateYourself

你的小提琴不起作用，因爲你沒有包含jQuery。在左邊的下拉框中。但是，一旦你包含jQuery它有點作用。問題是你想如何過濾。

如果檢查2個項目，是否要顯示那些具有任一項目（包含）的項目？或者你想展示那些既有（獨家）？

開始通過讓所有的過濾器陣列：

$('.resultblock').hide(); 
var values = $("#filters input:checkbox:checked").map(function(){ 
          return $(this).val(); 
         }).get();

包過濾是很容易：

$.each(values, function(idx, val){ 
    $('.resultblock[data-tag*="' + val + '"]').show(); 
});

專用過濾器是有點困難：

$.each($('.resultblock'), function(i, block){ 
    var $self = $(block); 
    var show = true; 
    var tag = $self.data('tag'); 
    $.each(values, function(idx, val){ 
     if(tag.indexOf(val) === -1){ 
      show = false; 
      return; 
     } 
    }); 
    if(show){ 
     $self.show(); 
    } 
});

這裏有一個小提琴顯示兩者：包含內容目前已被註釋掉：http://jsfiddle.net/vr8noyyL/16/

來源

2015-11-02 17:25:58

Jquery篩選器複選框陣列

回答

相關問題