通过复选框缩小显示的内容

Narrowing displayed content by checkbox

本文关键字：显示 缩小 复选框      更新时间：2023-09-26

我希望修改这段代码，以便显示的结果具有所有复选框的值。例如，在"电脑"answers"视频游戏"中，我只能得到结果3。

我该如何做这个改变?

<div class="tags">
<label><input type="checkbox" rel="arts" /> Arts </label>
<label><input type="checkbox" rel="computers" /> Computers </label>
<label><input type="checkbox" rel="health" /> Health </label>
<label><input type="checkbox" rel="video-games" /> Video Games </label>
</div>
<ul class="results">
<li class="arts computers">
    Result 1
</li>
<li class="video-games">
    Result 2
</li>
<li class="computers health video-games">
    Result 3
</li>
<li class="arts video-games">
    Result 4
</li>
</ul>
$('div.tags').delegate('input:checkbox', 'change', function()
{
 var $lis = $('.results > li').hide();
 //For each one checked
 var numChecked = $('input:checked').each(function()
 {
      $lis.filter('.' + $(this).attr('rel')).show();
 }).length;
if (!numChecked) $lis.show();
});
http://jsfiddle.net/gZUrA/2/

您可以获得选中名称的数组，并使用它来创建调用.filter()的选择器。

$('div.tags').delegate('input:checkbox', 'change', function() {
    var checkedNames = $('div.tags input:checkbox:checked').map(function() { return $(this).attr('rel'); }).get();
    if (checkedNames.length > 0) {
        var selector = '.' + checkedNames.join('.');
        $('.results > li').hide().filter(selector).show();
    } else {
        $('.results > li').show()
    }
});

jsfiddle

相关文章：