Javascript 按多个复选框列表筛选结果

我有两组不同的复选框列表。我想让他们根据“和”而不是“或”来过滤结果。我已经尝试了很多JavaScript的变体，但无法使其成为集合A和集合B中的任何一个。帮助

下面是HTML和JS，后面有一个JSFIDLE，可以看到它的作用：

<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>

工作区：

---

注：您有输入错误问题：首先输入的

已通过
值，但
div
已通过
类。
您应该做的是迭代每个组，收集每个组的所有选中项，然后合并类，类似于：

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

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

通过这种方式，您将得到如下结果：

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

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

这正是您所要寻找的。
您可以做的一件有趣的事情是，使用转换或与的另一种方法

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

$(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中的类为
pass
请澄清您的具体问题或添加其他详细信息，以突出显示您所需的内容。正如目前所写的，很难准确说出你在问什么。感谢你的帮助。但当所有内容都被选中时，它应该显示所有结果。如果未选择任何内容，则不应显示任何内容。（在你的版本中勾选和取消勾选一个框，你就会明白我的意思。）你能帮我再做一件事吗？如果“项目A”同时包含工作和移民，那么当您仅选中其中一个复选框时，它应该出现。对于你的，它必须匹配所有问题。有办法吗？它应该是集合A中的任何匹配项（和集合B中的任何匹配项）。我们计算出了and部分，但现在集合B中的ANY不起作用。因此有两组布尔变量，S1和S2。你想找到任何匹配或（S1）和或（S2）的项是真的，对吗？在这种情况下，你应该实现一个更复杂的逻辑，它不能像这样简单。我建议循环所有复选框，并将其真/假值放入地图中。此映射还应包括复选框所属的设置编号。然后循环所有项目，并根据地图的值和设置的数字显示/隐藏它们。如果您创建一个包含更多数据的JSFIDLE，我可以为您提供更多帮助。我对此表示感谢。下面是包含更多数据的JSFIDLE。您将看到我添加的条目可能有多个相关问题。