Question

当我选择2个或更多复选框时，我的jQuery复选框选择存在一些问题。我仍然是前端编程的新手，所以请耐心等待。

在一个复选框上选择/取消选择效果很好，但问题在于选择多个选项时：

1）当我选择第一个复选框和另一个第二个复选框时，它会给出除第二个选择之外的所有选项。

2）当我取消选中第二个复选框并且仍然选中第一个复选框时，它会给我所有选择。

似乎我必须在盒子上选择两次才能正确注册并给我正确的过滤选择。

此处的代码： JSFiddle

HTML

<div class="tags">
<label>
    <input type="checkbox" rel="accounting" />Accounting</label>
<label>
    <input type="checkbox" rel="courier" />Courier</label>
<label>
    <input type="checkbox" rel="project-management" />Project Management</label>
<label>
    <input type="checkbox" rel="video-games" />Video Games</label>
</div>
<ul class="results">
<li class="accounting" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Accounting</a></li>
<li class="courier" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Courier</a></li>
<li class="project-management" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Project Management</a></li>
<li class="video-games" style="list-style-type:none"><a href="http://cnn.com" style="text-decoration: none">Video Games</a></li>
</ul>

的jQuery

$(document).ready(function () {
$('div.tags').find('input:checkbox').live('click', function () {
    if ($(this).prop("checked")) {
        $('.results > li').toggle('show');
        $('div.tags').find('input:checked').each(function () {
            $('.results > li.' + $(this).attr('rel')).toggle('show');
        });
    } else{
       $('.results > li').show();
    }
});
});

Answer 1

这似乎可以满足您的需求：

$('div.tags').find('input:checkbox').on('click', function () {
    var vals = $('input:checkbox:checked').map(function () {
        return $(this).attr('rel');
    }).get();
    $('li').hide().filter(function () {
        return ($.inArray($(this).attr('class'), vals) > -1)
    }).show()
    if ($('input:checkbox:checked').length == 0) $('li').show()
});

<强> jsFiddle example

具有多个选择的jQuery复选框选择

1 个答案: