Question

我有两组不同的复选框列表。我希望他们根据＆＃34; AND＆＃34;过滤结果。不是＆＃34;或。＆＃34;我已经尝试了很多JavaScript的变体，并且无法将它设置为任何Set A AND 任何Set 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类。

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中的类为pass。

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

3 个答案: