Question

我只想使用jquery使用checkbox数组进行过滤。当只选中一个复选框时，它工作正常，但当我选择两个或更多复选框时，它不显示所有div。你能不能帮我找到我的错误。

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>

Answer 1

使用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

<强>更新

为了选择所有和选择无以显示所有内容，请按如下方式更新DEMO 1：

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

DEMO 3

Answer 2

你的小提琴不起作用，因为你没有包含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/

Jquery过滤器复选框数组

2 个答案: