Eine Tabellenzeile ausblenden, wenn ein Kontrollkästchen aktiviert ist

Question

Ich teste diese table und ich versuche, einige Zeilen zu verbergen, wenn eine checkbox überprüft wird.

Zum Beispiel in meinem Fall: Wenn die Checkbox 3.5 Die Tabelle Reihen cheked ist, die enthalten Zimmer 2.5 und 4.5 sind versteckt.

Oder wenn zum Beispiel die Checkbox 2.5 geprüft wird, sind die Tabellenzeilen mit Zimmer 3.5 oder 4.5 nicht sichtbar.

Ich habe versucht, eine Checkbox, eine Datennummer, aber nichts zu geben ...

I <input type="checkbox" data-number="3.5" /> versucht

Irgendwelche Ideen?

EDIT:

Ich habe versucht, so etwas wie dieses JS:

jQuery(document.body).on('change', "#row2", function() { 
jQuery("#tablepress-id-5 tr.row2").toggle(!this.checked); 
}); 

Answer 1

Ich glaube, einige Javascript abfeuern sollten, wenn Sie das Kontrollkästchen klicken und die erwarteten Zeilen verschwinden. Hast du das relevante Javascript dort?

Answer 2

Sie sollten es anders herum tun - das Kontrollkästchen sollte einen Wert basierend auf der Zahl haben, die es darstellt, und die Tabellenzeile kann ein Datenattribut haben, das die Anzahl der Räume angibt.

<input type="checkbox" name="rooms_check" value="2"> 
<input type="checkbox" name="rooms_check" value="3"> 
<input type="checkbox" name="rooms_check" value="4"> 
<table> 
    <tr data-number="2"> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
    </tr> 
    <tr data-number="3"> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
     <td>Value</td> 
    </tr> 
</table> 

dann mit JS:

$('input[name="rooms_check"]').change(function(){ 
    $('input[name="rooms_check"]').each(function(){ 
     if(!$(this).prop('checked')) { 
      $('tr[data="'+$(this).val()+'"]').hide(); 
     } else { 
      $('tr[data="'+$(this).val()+'"]').show(); 
     } 
    }); 
}); 

UPDATE:

Hier ist, wie Sie es ohne Änderung der Tabelle html tun könnte.

$('input[name="rooms_check"]').change(function(){ 
    $('input[name="rooms_check"]').each(function(){ 
     if(!$(this).prop('checked')) { 
      $('tr').has('td:nth-child(2):contains("'+$(this).val()+'")').hide(); 
     } else { 
      $('tr').has('td:nth-child(2):contains("'+$(this).val()+'")').show(); 
     } 
    }); 
}); 

Answer 3

Hallo A Casa versuchen diesen Code

$('input[type=checkbox]').on('change',function(e){ 
v=$(this).val(); 
$('td:contains("+v+")').parent('tr').toggle() 
})