javascript - フィルタリング - 複数の選択肢jquery javascript

Question

特定のものを検索するのに役立つフィルタリング スクリプトを作成しようとしています。私はjavascript / jqueryがあまり得意ではなく、次のスクリプトを見つけて好きなように変更しました。

すべてが正常に機能し、白い鶏肉を選択できましたが、問題は、白と黒を選択して白と黒のすべての動物を検索すると機能しないことです。

私は何を間違っていますか、またはこれを修正するために何を変更できますか?

http://jsfiddle.net/d6Zyr/2/

Javascript:

  $(function(){
  $('div.tags').delegate('input[type=checkbox]', 'change', function()
  {
var $lis = $('.results > li'),
$checked = $('input:checked');
if ($checked.length)
{
    var selector = $checked.map(function ()
    {
        return '.' + $(this).attr('rel');
    }).get().join('');

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


})

HTML:

<div class="tags">
 <fieldset class="filter-grp">
 <label><input type="checkbox" rel="white" name="year" /> white </label><br>
 <label><input type="checkbox" rel="blue" name="year" /> blue </label><br>
<label><input type="checkbox" rel="yellow" name="year" /> yellow </label><br>
</fieldset>

<br>
<fieldset class="filter-grp">
<label><input type="checkbox" rel="horse" name="type"  /> horse</label><br>
<label><input type="checkbox" rel="chicken" name="type"  /> chicken</label><br>
<label><input type="checkbox" rel="cow" name="type"  /> cow</label><br>
</fieldset>
<br>


</div>

<ul class="results">
<li class="white cow">white cow</li>
<li class="white horse">white horse</li>
<li class="white chicken">white chicken</li>
<li class="black cow">white cow</li>
<li class="blue horse">white horse</li>
<li class="white chicken">white chicken</li>
 </ul>