需要從過濾項

結果我有一個過濾多個項目簡單的代碼，到目前爲止，它的工作需要從過濾項

下面是代碼：

<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，我可以看到你的演示。清除選擇正在工作。你可以檢查如何顯示在某些地方像上面的圖片鏈接檢查項目？ –

需要從過濾項

回答

相關問題