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筛选器复选框阵列

回答

相关问题