使用 jQuery 过滤复选框

Posted 2023-03-10

【中文标题】使用 jQuery 过滤复选框

【英文标题】：Filtering with checkboxes using 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();

);

【参考方案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();
);