使用 jQuery 过滤复选框答案

【问题标题】：Filtering with checkboxes using jQuery使用 jQuery 过滤复选框
【发布时间】：2012-02-06 11:06:55
【问题描述】：

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

感谢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();

});

【问题讨论】：

标签： jquery html filtering

【解决方案1】：

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

隐藏所有 <div> 元素，然后遍历复选框，并为每个选中的.show() 使用具有关联类别的<div> 元素。
遍历所有复选框以列出要显示的类，然后遍历 <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/

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

【讨论】：

【解决方案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);

【讨论】：

【解决方案3】：

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();

    });

});

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

【讨论】：

【解决方案4】：

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

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();
});

【讨论】：

【解决方案5】：

@Josiah Ruddell - 代码没有在 IE9 中运行

我将“window.console &&”添加到 ...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();
});

【讨论】：