Php jQuery多复选框页面过滤器

我一直在试图弄清楚如何正确地完成这项工作，但似乎无法让它正常工作

我想使用jQuery来挑选我想在页面上显示的内容。我看了看，试图找到一些脚本，一些工作，但不是真的我想要它

该页面将使用复选框作为“标签”，比如艺术、计算机、健康、视频游戏

 <div class="tags">
 <label><input type="checkbox" class="arts" /> Arts </label>
 <label><input type="checkbox" class="computers" /> Computers </label>
 <label><input type="checkbox" class="health" /> Health </label>
 <label><input type="checkbox" class="video-games" /> Video Games </label>
 </div>

但它不起作用，它只是隐藏了所有东西，然后就不会回来展示其余的东西。我知道逻辑是完全错误的，我不认为我应该以这种方式使用每个？也许用它来抓取数组中的所有类，然后显示具有这些类的li

有什么想法吗？

试试这个。伪代码：

$(yourstuff).grep(filter1).grep(filter2)...

两个问题

输入选择器-

.is

是一个函数，而不是选择器

hasClass

-也不是选择器 它们都返回

true

或

false

，因此不能像jQuery对象那样对其结果进行操作

• 使用复选框的

  .change（）

  事件

• .hasClass（）

  返回一个布尔值。
• 将该信息存储在

  类

  以外的属性（如

  rel

  或

  数据-*

  属性）中更有意义

---

演示：

---

@贾斯汀问

---

如何更改此选项以仅返回与所有复选框匹配的lis，而不是其中任何一个复选框

将每个选中输入中的内容（无论您使用的是什么属性）填充到一个数组中，

String.join（'.'）

it创建一个大类选择器，然后

.filter（）

与前面一样：

var selector = $('input:checked').map(function ()
{
    return $(this).attr('rel');
}).get().join('.');
$lis.filter(selector).doWhatever();

---

我对Matt的解决方案做了一些修改，这样它就能满足你的要求。至少我是如何解释的（只显示与所有选定类别匹配的项目）。但它绝不像Matt的解决方案那样优雅：

HTML：

<div class="tags">
    <label><input type="checkbox" data-category="arts" /> Arts </label>
    <label><input type="checkbox" data-category="computers" /> Computers </label>
    <label><input type="checkbox" data-category="health" /> Health </label>
    <label><input type="checkbox" data-category="video-games" /> Video Games </label>
</div>

<ul class="results">
    <li data-category="arts computers">
        Result 1
    </li>
    <li data-category="video-games">
        Result 2
    </li>
    <li data-category="computers health video-games">
        Result 3
    </li>
    <li data-category="arts video-games">
        Result 4
    </li>
</ul>

艺术类
计算机
健康
电子游戏


结果1


结果2


结果3


结果4

而JS：

$('div.tags').delegate('input:checkbox', 'change', function() {
    $('.results > li').hide();

    var selector = $('input:checked').map(function() {
        return $(this).attr('data-category');
    }).get();

    function matchesCategories(elem) {
        var elemCats = elem.attr('data-category');

        if (elemCats) {
            elemCats = elemCats.split(' ');
        } else {
            elemCats = Array();
        }
        for (var i = 0; i < selector.length; i++) {
            console.log("testing " + selector[i] + " in:");
            console.log(elemCats);
            if (jQuery.inArray(selector[i], elemCats) == -1) {
                return false;
            }
        }
        return true;
    }
    $('.results > li').each(function(i, elem) {
        if (matchesCategories(jQuery(elem))) {
            $(elem).show();
        }
    });

}).find('input:checkbox').change();

$（'div.tags'）.delegate（'input:checkbox'，'change'，function（）{
$（'.results>li'）.hide（）；
变量选择器=$（'input:checked'）.map（函数（）{
返回$（this.attr（'data-category'）；
}).get（）；
功能匹配类别（elem）{
var elemCats=elem.attr（‘数据类别’）；
if（电子计算机）{
elemCats=elemCats.split（“”）；
}否则{
elemCats=Array（）；
}
对于（变量i=0；ili'）。每个（函数（i，elem）{
if（匹配类别（jQuery（elem）））{
$（elem.show（）；
}
});
}).find（'input:checkbox'）.change（）；

如果你想试试，这是我的建议

我非常喜欢.on（））[jQuery 1.7+]

---

这到底有什么用？“将展示所有既有艺术又有电子游戏的东西”。。。所以我想链式grep会实现这个逻辑，但我可能错了。不过我还是喜欢你的解决方案。很好。Re：问题#1，OP没有试图使用

.is（）

作为选择器。

.is（…）。每个（…）

都是。对不起，不是想学究式的-我现在明白你的意思了。实际问题1是

.is（）

返回一个布尔值。在他的用法中，他试图像使用“：checked”选择器一样使用它。这就是我的意思。您如何更改此选项以仅返回与所有复选框匹配的

li

s而不是其中任何一个复选框？非常感谢您的快速响应！很好用，很简单，所以我喜欢它。谢谢只是好奇，如果有一个简单的方式开始与他们所有显示，然后我点击一个它会开始过滤。我想将$（'.results>li）.hide（）更改为show（），然后添加一个$（'input:not（：checked'）。每个都有一个hide（）。@derno哦，我实际上添加了额外的代码来启动所有的

隐藏。只需删除

.find（'input:checkbox'）.change（）

-另请参见@derno，如果我的答案解决了您的问题，您介意吗？@matt ball，它实际上只在开始时起作用，但如果您在选中一些后取消选中所有选项，则它不会显示所有内容。你知道怎么做吗？也-接受了你的回答，因为我是新来的，所以我不知道。谢谢你的这个解决方案，它几乎与Matt的相反，它可能对我真的很有用！不行，我只有10个代表，需要15个=(

$('div.tags').delegate('input:checkbox', 'change', function()
{
     var $lis = $('.results > li').hide();
     $('input:checked').each(function()
     {
          $lis.filter('.' + $(this).attr('rel')).show();
     });      
}).find('input:checkbox').change();

var selector = $('input:checked').map(function ()
{
    return $(this).attr('rel');
}).get().join('.');
$lis.filter(selector).doWhatever();

<div class="tags">
    <label><input type="checkbox" data-category="arts" /> Arts </label>
    <label><input type="checkbox" data-category="computers" /> Computers </label>
    <label><input type="checkbox" data-category="health" /> Health </label>
    <label><input type="checkbox" data-category="video-games" /> Video Games </label>
</div>

<ul class="results">
    <li data-category="arts computers">
        Result 1
    </li>
    <li data-category="video-games">
        Result 2
    </li>
    <li data-category="computers health video-games">
        Result 3
    </li>
    <li data-category="arts video-games">
        Result 4
    </li>
</ul>

$('div.tags').delegate('input:checkbox', 'change', function() {
    $('.results > li').hide();

    var selector = $('input:checked').map(function() {
        return $(this).attr('data-category');
    }).get();

    function matchesCategories(elem) {
        var elemCats = elem.attr('data-category');

        if (elemCats) {
            elemCats = elemCats.split(' ');
        } else {
            elemCats = Array();
        }
        for (var i = 0; i < selector.length; i++) {
            console.log("testing " + selector[i] + " in:");
            console.log(elemCats);
            if (jQuery.inArray(selector[i], elemCats) == -1) {
                return false;
            }
        }
        return true;
    }
    $('.results > li').each(function(i, elem) {
        if (matchesCategories(jQuery(elem))) {
            $(elem).show();
        }
    });

}).find('input:checkbox').change();

$('.tags')
    .on('update', function() {
        // Limit the selector(s) to search for:
        var $filters = $(this).find('input:checked');

        // Get the class names of interest
        // Return null (rather than "") to keep them out of the result array
        var $classes = $filters.map(function(){ return this.className || null; });

        // Use .replace() if your checkboxes might target multiple classes
        var selector = $classes.get().join('.').replace(/ /g,'.');

        var $results = $('ul.results > li').hide();

        if (selector) 
            $results.filter('.'+selector).show();
    })

    // Relay any changes to the display-state container (.tags)
    .on('change','input[type="checkbox"]',function() {
        $(event.currentTarget).trigger('update');
    })

    // When first loaded, apply the server-supplied checkbox state(s) to the page:
    .trigger('update');​