J'ai un tableau HTML dans lequel je veux masquer/afficher les lignes en fonction de plusieurs cases à cocher.Masquer les lignes avec plusieurs cases à cocher
Lorsqu'une case est cochée, (en fonction d'un critère de texte), certaines lignes se cachent, si elle n'est pas cochée, toutes les lignes sont affichées. Si 2 cases ou plus sont cochées, toutes les lignes sont cachées, sauf celles qui répondent aux critères de toutes les cases cochées. Mais si je désélectionne l'une des checbox, toutes les lignes sont affichées.
Ma question est la suivante: lorsque je désélectionne l'une des cases à cocher, comment puis-je afficher UNIQUEMENT les lignes répondant aux critères de toutes les cases sélectionnées?
Pour mieux comprendre, je dois vérifier quelles lignes sont déjà masquées par les autres cases et ne pas les afficher lorsqu'une case n'est pas cochée.
Exemple de cas de travail: checkbox1 et checkbox2 sont sélectionnés: seulement row1 est affiché, si je décocher checkbox2, ne row1 et row3 doivent être présentés
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');
}
});
});