0
我有一個HTML表格，我想在其中隱藏/顯示基於多個複選框的行。隱藏有多個複選框的行
當一個複選框被選中時，（根據文本標準）一些行被隱藏，如果未選中，則顯示所有行。如果選中了2個或更多複選框，則所有行都是隱藏的，除了符合所有選定複選框的條件的行之外。但是如果我取消選中任何一個checboxes，所有的行都會顯示出來。
我的問題是，當我取消選中其中一個複選框時，如何僅顯示符合所有當前選定複選框的條件的行？
爲了更好的理解，我需要檢查哪些行已被其他複選框隱藏，並且在複選框未選中時不顯示它們。工作箱子
實施例： checkbox1和checkbox2選擇：僅示出ROW1，如果我取消checkbox2，僅ROW1和ROW3必須顯示
HTML：
<label><input type="checkbox" id="checkbox1">Teacher</label>
<label><input type="checkbox" id="checkbox2">Tennis</label>
<label><input type="checkbox" id="checkbox3">Married</label>
<table id="table" border="1">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Profession</th>
<th>Hobby</th>
<th>Married</th>
</thead>
<tbody>
<tr id="row1">
<td>John</td>
<td>Doe</td>
<td>Teacher</td>
<td>Tennis</td>
<td>Yes</td>
</tr>
<tr id="row2">
<td>Eve</td>
<td>Jackson</td>
<td>Doctor</td>
<td>Darts</td>
<td>No</td>
</tr>
<tr id="row3">
<td>Adam</td>
<td>Johnson</td>
<td>Teacher</td>
<td>Skydiving</td>
<td>Yes</td>
</tr>
<tr id="row4">
<td>Nina</td>
<td>Pursuit</td>
<td>Lawyer</td>
<td>Tennis</td>
<td>Yes</td>
</tr>
</tbody>
</table>
的jQuery：
$(document).ready(function() {
$('#checkbox1').change(function() {
for (var i = 0; i < 5; i++) {
if ((this.checked) && $("#table #row"+i+" td:nth-child(3):not(:contains('Teacher'))").length){
$('#row'+i).fadeOut('slow');
}
if (!this.checked) $('#row'+i).fadeIn('slow');
}
});
$('#checkbox2').change(function() {
for (var i = 0; i < 5; i++) {
if ((this.checked) && $("#table #row"+i+" td:nth-child(4):not(:contains('Tennis'))").length){
$('#row'+i).fadeOut('slow');
}
if (!this.checked) $('#row'+i).fadeIn('slow');
}
});
$('#checkbox3').change(function() {
for (var i = 0; i < 5; i++) {
if ((this.checked) && $("#table #row"+i+" td:nth-child(5):not(:contains('Yes'))").length){
$('#row'+i).fadeOut('slow');
}
if (!this.checked) $('#row'+i).fadeIn('slow');
}
});
});