需要从过滤项

结果我有一个过滤多个项目简单的代码，到目前为止，它的工作需要从过滤项

下面是代码：

<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 & M如何显示他选择的字母？并通过点击清除按钮给出一个选项来清除所有的字段？

这里是FIDLE http://jsfiddle.net/nucleo1985/g9SAQ/

感谢，

来源

2014-01-14 Hendra Nucleo

对不起，不明确 - 可以哟你举一个例子 –

嗨，这是小提琴：http://jsfiddle.net/nucleo1985/g9SAQ/，这是我从网站截图截图http://www.screencast.com/t/njhZTcmAAn –

我的答案有已更新，以解决您的问题/关注..请检查，如果它现在正确 – erikrunia

更新你的提琴，当检查一个盒子来提醒（所以你可以看到如何显示复选框ch的值ecked），并增加了一个按钮来清除所有的（所以你可以看到如何重置结果列表，并清除所有复选框检查）

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'));

来源

2014-01-14 04:34:55 erikrunia

嗨，eric，是的清除按钮运行良好。但检查是警报，你能告诉如何在页面上显示检查的项目？行

checked item here

。谢谢 –

好吧，我更新了FIDDLE做你所问 - http://jsfiddle.net/g9SAQ/3/ – erikrunia

是的，完美的工作。非常感谢erik。不幸的是仍然不能投票到目前为止。再次感谢。 –

取出id="myBtn"为id必须unique并添加class category到checkboxes 还添加checkbox其id为clear到clear的div一样，

$('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

来源

2014-01-14 04:33:22

嗨rohan，我可以看到你的演示。清除选择正在工作。你可以检查如何显示在某些地方像上面的图片链接检查项目？ –

需要从过滤项

回答

相关问题