Question

我有简单的代码来过滤多个项目，到目前为止它的工作

以下是代码：

<div class="container btn-group tags" data-toggle="buttons">

    <label class="btn btn-primary active" id="myBtn">
        <input type="checkbox" rel="arts" /> Arts
    </label>
    <label class="btn btn-primary" id="myBtn">
        <input type="checkbox" rel="computers" /> Computers
    </label>
    <label class="btn btn-primary" id="myBtn">
        <input type="checkbox" rel="health" /> Health
    </label>
    <label class="btn btn-primary" id="myBtn">
        <input type="checkbox" rel="video-games" /> Video Games
    </label>
</div>
<div class="container">
    <div class="results">
        <div class="container arts computers">
            Result 1
        </div>
        <div class="container video-games">
            Result 2
        </div>
        <div class="container computers health video-games">
            Result 3
        </div>
        <div class="container arts video-games">
            Result 4
        </div>
    </div>
</div>

这是脚本：

 $('div.tags').delegate('input[type=checkbox]', 'change', function()
{
    var $lis = $('.results > div'),
            $checked = $('input:checked');

    if ($checked.length)
    {
        var selector = $checked.map(function ()
        {
            return '.' + $(this).attr('rel');
        }).get().join('');

        $lis.hide().filter(selector).show();
    }
    else
    {
        $lis.show();
    }
});

我的问题是，如果我有过滤器让A - Z字母说，有人选择A＆amp; M如何显示他选择的字母？并通过单击清除按钮提供清除所有字段的选项？

这是fidle http://jsfiddle.net/nucleo1985/g9SAQ/

谢谢，

Answer 1

删除id="myBtn"，id必须为unique，并将class category添加到checkboxes 同时添加checkbox id为clear至clear div的{{1}}，

$('div.tags').delegate('#clear', 'change', function() {
    $('.category').prop('checked',false);
    $('.results > div').hide();
});

修改你的category checkboxes喜欢，

$('div.tags').delegate('input[type=checkbox].category', 'change', function() {
    if($('.category:checked').length){// if clear is checked then uncheck it
       $('#clear').prop('checked',false);
    }
    var $lis = $('.results > div'),
        $checked = $('input.category:checked');
    if ($checked.length){
        var selector = $checked.map(function (){
            return '.' + $(this).attr('rel');
        }).get().join(', '); // join the array with ', '
        $lis.hide().filter(selector).show();
    } else{
        $lis.show();
    }
});

Demo

已更新，如果您想要显示active div's，请尝试

<强> CSS

.active{
   background:#BBE4E7;
}

在 Jquery 中替换

行

$lis.hide().filter(selector).show(); $lis.removeClass('active').filter(selector).addClass('active');
$('.results > div').hide(); $('.results > div').removeClass('active');

Updated Demo

Answer 2

在选中复选框时更新了ALERT（这样您就可以看到如何显示复选框的值），并添加了一个清除所有选项的按钮（这样您就可以看到如何重置结果列表并清除所有复选框检查）< / p>

Working Fiddle Demo

<button onclick="$('input:checkbox').removeAttr('checked');$('.results > div').show();$('.checkedItem').html('');">Clear All</button>

我添加了一个新的div来将最后一个复选框值放入：

<div class="checkedItem">checked item will go here once clicked</div>

以下是它的输入方式：

 $('.checkedItem').html($(this).attr('rel'));

需要从过滤项中获取结果

2 个答案: