TDに値が含まれていない場合、複数のチェックボックスに行が表示されない

Question

テキストを含むtdを含むテーブルがあります。チェックボックスの値に基づいて各行をフィルタリングできるようにしたい。たとえば、チェックボックスを1つだけ選択すると、チェックボックスの値を含まない行が表示され、フィルタされます。チェックボックスを2つ選択すると、フィルタリングされ、チェックボックスの両方の値を含む行のみが表示されます。私はそれを部分的に動作させることができますが、2番目のチェックボックスが選択されているかどうかにかかわらず、チェックボックスの値があれば行が表示されます。追加のチェックボックスを選択すると、それをさらにフィルタリングする方法を教えてください。

これまでのコードは次のとおりです。

jQuery('document').ready(function(){ 
var $ = jQuery 
$(":checkbox").click(function() { 
var showAll = true; 
$('tr').not('.first').hide(); 
var checkedValues = $(":checkbox:checked").map(function() { 
    return this.value; 
}).get(); 

$("tbody tr").hide(); 
for (var i = 0; i < checkedValues.length; i++) { 
    showAll = false; 
    $("td:contains('" + checkedValues[i] + "')").parent("tr").show(); 
} 

if(showAll){ 
    $('tr').show(); 
} 
}); 
}); 

Answer 1

あなただけチェックし、チェックボックスの値のすべてが含まれている行を必要とすると仮定すると。

はこれを試してみてください：

$(":checkbox").click(function() { 
 
    var checkedValues = $(":checkbox:checked").map(function() { 
 
    return this.value; 
 
    }).get(); 
 

 
    $("tbody tr") 
 
    .hide() 
 
    .filter(function() { 
 
    \t var 
 
    $tr = $(this), 
 
    $tds = $.map(checkedValues, function(v) { 
 
    \t return $tr.find('td:contains(' + v + ')').length > 0 ? v : null; 
 
    }); 
 
    return $tds.length == checkedValues.length; 
 
    }).show(); 
 

 
    if (checkedValues.length == 0) { 
 
    $('tr').show(); 
 
    } 
 
});

#searchTable { 
 
    border-collapse: collapse; 
 
} 
 

 
#searchTable td { 
 
    border: 1px solid #333; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" id="buh" value="buh"> 
 
<label for="buh">buh</label> 
 
<input type="checkbox" id="dum" value="dum"> 
 
<label for="dum">dum</label> 
 
<input type="checkbox" id="tss" value="tss"> 
 
<label for="tss">tss</label> 
 

 
<table id="searchTable"> 
 
    <thead> 
 
    <tr class="first"> 
 
     <td>probably</td> 
 
     <td>are</td> 
 
     <td>headers</td> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td>buh</td> 
 
     <td></td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>dum</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td></td> 
 
     <td>tss</td> 
 
    </tr> 
 
    <tr> 
 
     <td>buh</td> 
 
     <td>dum</td> 
 
     <td></td> 
 
    </tr> 
 
    <tr> 
 
     <td></td> 
 
     <td>dum</td> 
 
     <td>tss</td> 
 
    </tr> 
 
    <tr> 
 
     <td>buh</td> 
 
     <td></td> 
 
     <td>tss</td> 
 
    </tr> 
 
    </tbody> 
 
</table>