Question

我想使用复选框过滤一些内容。

我设法做到这一点归功于earlier post，我在这里简化了一点DEMO。

我的问题是每个内容项可以附加多个类别。当我选择类别A和类别B然后取消选择类别B时，将删除同时附加两个类别的内容项。

我正在研究的项目将包含两个以上的类别。内容项可以附加许多类别

HTML：

<ul id="filters">
    <li>
        <input type="checkbox" value="categorya" id="filter-categorya" />
        <label for="filter-categorya">Category A</label>
    </li>
    <li>
        <input type="checkbox" value="categoryb" id="filter-categoryb" />
        <label for="filter-categoryb">Category B</label>
    </li>
</ul>

<div class="categorya categoryb">A, B</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categorya">A</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>
<div class="categoryb">B</div>

使用Javascript：

$('input').click(function() {
    var category = $(this).val();

    if (!$(this).attr('checked')) $('.' + category).hide();
    else $('.' + category).show();

});

Answer 1

我认为两种最直接的方法是点击任何过滤器复选框：

隐藏所有 <div>元素，然后循环选中复选框，并为每个选中的.show()个<div>元素循环显示相关类别。< / p>
遍历所有复选框以显示要显示的类的列表，然后遍历<div>元素，检查每个元素以查看它是否具有其中一个类.hide()或.show()视情况而定。

是否有一些常规选择器可用于获取所有<div>元素？他们是否有一个特定的容器元素，就像所有复选框都是“#filters”的后代一样？

// Solution 1

$("#filters :checkbox").click(function() {
   $("div").hide();
   $("#filters :checkbox:checked").each(function() {
       $("." + $(this).val()).show();
   });
});

演示：http://jsfiddle.net/6wYzw/41/

// Solution 2

$("#filters :checkbox").click(function() {

   var re = new RegExp($("#filters :checkbox:checked").map(function() {
                          return this.value;
                       }).get().join("|") );
   $("div").each(function() {
      var $this = $(this);
      $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
   });
});

演示：http://jsfiddle.net/6wYzw/42/

我猜第一种方式更短，更容易维护......

Answer 2

我想添加jquery动画来显示和隐藏。上面的解决方案不允许这样做（首先隐藏所有内容，然后显示）或者使用正则表达式很麻烦。基于以上原因，我的解决方案如下：

var showselector = $('input:checkbox').map(function(){ 
        return this.checked ? '.' + this.id : null; 
    }).get().join(','); 
var hideselector = (showselector) ? ':not(' + showselector + ')' : '*';

$("div").filter(showselector).slideDown(1500);
$("div").filter(hideselector).slideUp(1500);

Answer 3

当他们点击复选框时，会构建一个这样的选择器：

var selector = $('input:checkbox').map(function(){ 
    return this.checked ? '.' + this.id : ''; 
}).get().join('');

这将生成一个选择器，如categoryb.categoryc（AND css选择器）。然后，您可以隐藏所有内容，并显示符合选择器的内容。

$('div[class^="category"]')
    .hide()
    .filter(selector)
    .show();

在jsbin

上试用

工作代码：

$('input').click(function() {
    var selector = $('input:checkbox').map(function(){ 
        return this.checked ? '.' + this.id : ''; 
    }).get().join('');
    console.log(selector);  

    var all = $('div[class^="category"]');
    if(selector.length)
      all.hide().filter(selector).show()
    else all.show();
});

Answer 4

http://jsfiddle.net/FfZsC/

$('input').click(function() {
    var category = $(this).val();

    $('.' + category).each(function () {
        var anyChecked = false;
        var classArray = this.className.split(/\s+/);

        for(idx in classArray)
        {
            if ($('#filter-' + classArray[idx]).is(":checked"))
            {
                anyChecked = true;
                break;
            }
        }

        if (! anyChecked) $(this).hide();
        else $(this).show();

    });

});

基本上，我会检查与当前单击的过滤器相关的项目相关联的每个类别复选框。如果仍检查其中任何一个，则显示该项目;否则，它是隐藏的。

Answer 5

@Josiah Ruddell - 代码未在IE9中运行

我添加了“window.console＆amp;＆amp;”到... console.log ...在IE9中正确运行

$('input').click(function() {
    var selector = $('input:checkbox').map(function(){ 
        return this.checked ? '.' + this.id : ''; 
    }).get().join('');
    window.console && console.log(selector);  

    var all = $('div[class^="category"]');
    if(selector.length)
      all.hide().filter(selector).show()
    else all.show();
});

使用jQuery过滤复选框

5 个答案: