zeigen/verbergen Tabellenzeilen nach dem Klicken auf das Kontrollkästchen

Question

Ich möchte alle Tabellenzeilen entfernen, nachdem der Benutzer das Kontrollkästchen angeklickt hatte, mit Ausnahme der Tabellenzeile mit dem Kontrollkästchen selbst, und um die Tabellenzeilen wieder anzuzeigen, wenn das Kontrollkästchen erneut deaktiviert. Mein Code funktioniert nur zum Entfernen, aber ich muss die Tabelle erneut anzeigen, nachdem ich sie deaktiviert habe.

function Showhidefunc(btndel) { 
    if (typeof(btndel) == "object") { 
    $('table tr td:first-child :checkbox:not(:checked)').closest('tr').remove(); 
    } else { 
     return false; 
    } 
} 

<thead> 
<tr> 
    <th>Select</th> 
    <th>Month</th> 
    <th>Username</th> 
    <th>Deduction</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
    <td><input type="checkbox" onChange="Showhidefunc(this);"></td> 
    <td><?php echo $Name_row ['Month'];?></td> 
    <td><?php echo $Name_row ['Username'];?></td> 
    <td><?php echo $Name_row ['Total_Deduction'];?></td> 
</tr> 
</tbody> 

Danke Jungs :)

Answer 1

nicht in Anspruch genommen werden sollte Verwenden Sie in den Zeilen .remove(), da dies sie löscht; Sobald Sie sie entfernen, sind sie weg und Sie können sie nicht zurückbekommen.

Verwenden .hide() dann .show()

function Showhidefunc(chkbox) { 
    if ($(chkbox).is(":checked")) 
     $('table tr td:first-child :checkbox:not(:checked)').closest('tr').hide(); 
    } else { 
     $('table tr td:first-child :checkbox:not(:checked)').closest('tr').show(); 
    } 
    } 

AKTUALISIERT: Aktualisiert Code html und besser zu entsprechen, wenn/sonst

Version mit toggle:

function Showhidefunc(chkbox) { 
    $('table tr td:first-child :checkbox:not(:checked)').closest('tr').toggle(!$(chkbox).is(":checked")); 
    } 

Als beiseite, es andere Möglichkeiten gibt, um tun dies, wie zum Beispiel mit .map()

Answer 2

function Showhidefunc(btndel) { if (typeof(btndel) == "object") { $('table tr td:first-child :checkbox:not(:checked)').closest('tr').remove(); } else { return false; } }

die .remove .hide()

in der Sie sonst das gleiche tun wollen, aber .show() statt