通过多个复选框列表过滤结果

Question

我有两组不同的复选框列表。我希望他们根据 "AND" 而不是 "OR." 来过滤结果我已经尝试了很多 JavaScript 的变体，但无法做到，所以它是 A 组中的任何一个 AND B 组中的任何一个。帮助？

这是 HTML 和 JS，然后是 jsfiddle 以查看它的实际效果：

<fieldset class="fieldset">
    <legend>Status</legend>
    <input id="passed" type="checkbox" value="passed" checked class="status">
    <label for="passed">Passed</label>
    <br />
    <input id="failed" type="checkbox" value="failed" checked class="status">
    <label for="failed">Failed</label>
</fieldset>

<fieldset class="fieldset">
    <legend>Issues</legend>
    <input id="Jobs" type="checkbox" value="jobs" checked class="subject">
    <label for="jobs">Jobs</label>
    <br />
    <input id="immigration" type="checkbox" value="immigration" checked class="subject">
    <label for="immigration">Immigration</label>
</fieldset>

<div class="document pass jobs">
    Item A
</div>

<div class="document failed immigration">
    Item B
</div>

对于 JS，我尝试了几种不同的方法，主要是使用复选框的类（因此，[type=checkbox].status 种东西）。但这是最基本的版本：

$(document).ready(function() {
    $('input[type=checkbox]').on('change', function() {
        $('.document ').hide();
        $('input[type=checkbox]:checked').each(function() {
            var value = $(this).attr('value');
            $('.' + value).show();
        });
    });
});

http://jsfiddle.net/ogwofbak/

Answer 1

    $('.document ').hide();
    var checked = '';
    $('input[type=checkbox]:checked').each(function() {
        var value = $(this).attr('value');
        checked += '.' + value;
    });
    $(checked).show();

工作 jsFiddle：http://jsfiddle.net/ogwofbak/5/

PS。您有错字问题：第一个输入有 passed 值，但 div 有 pass class.

Answer 2

你应该做的是迭代每个组，收集每个组的所有检查项目，然后连接类，类似于：

$('.' + val1 + '.' + val2).show();

这样你会得到类似的东西：

$('.pass.jobs').show();

这正是您要找的。

Answer 3

您可以做一件有趣的事情，就是使用 De Morgan's laws 将 OR 转换为 AND。

首先，显示所有内容，然后遍历所有未选中的输入，并隐藏与未选中的复选框对应的项目。

$(document).ready(function() {
    $('input[type=checkbox]').on('change', function() {
        $('.document').show();
        $('input[type=checkbox]:not(:checked)').each(function() {
            var value = $(this).attr('value');
            $('.' + value).hide();
        });
    });
});

此外，这里的另一个答案也提到了，您的 html 中有错字。输入值为 passed 但 div 中的 class 为 pass.

通过多个复选框列表过滤结果

Filtering results by multiple checkbox lists

javascript

checkbox

jquery

checkboxlist