Question

我希望修改此代码，以便显示的结果具有所有复选框的值。例如，通过检查＆＃34;计算机＆＃34;和＃34;视频游戏＆＃34;我只有结果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/

Answer 1

您可以获取已检查名称的数组，并使用它为.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

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

1 个答案: