Ich habe eine Reihe von Zeilen und Kontrollkästchen, um sie zu filtern:
<ul>
<li><input id="type-A" type="checkbox" checked="checked"> <a href="stackoverflow.com/A">A</a></li>
<li><input id="type-B" type="checkbox" checked="checked"> <a href="stackoverflow.com/B">B</a></li>
<li><input id="type-C" type="checkbox" checked="checked"> <a href="stackoverflow.com/C">C</a></li>
<li><input id="type-D" type="checkbox" checked="checked"> <a href="stackoverflow.com/D">D</a></li>
<li><input id="type-E" type="checkbox" checked="checked"> <a href="stackoverflow.com/E">E</a></li>
<li><input id="type-F" type="checkbox" checked="checked"> <a href="stackoverflow.com/F">F</a></li>
</ul>
<table>
<tr class="A">filler</tr>
<tr class="B">filler</tr>
<tr class="A B">filler</tr>
<tr class="C D">filler</tr>
<tr class="A F">filler</tr>
<tr class="A E F">filler</tr>
<tr class="F">filler</tr>
<tr class="C D E">filler</tr>
<tr class="A B C D E F">filler</tr>
</table>Ich möchte Zeilen ein-/ausblenden, je nachdem, was angekreuzt ist. Derzeit verwende ich (mit der Hilfe von dieser vorherigen Frage: Verwenden Sie "this", um den Code zu vereinfachen (einfaches jQuery) ) :
$(function(){
$("input[id^='type-']").change(function() {
$("."+this.id.replace('type-','')).toggle(this.checked);
}).change();
});Dadurch wird jedes Mal, wenn ein Feld angeklickt wird, umgeschaltet, was angezeigt wird, und das funktioniert gut, wenn jede Zeile nur eine Klasse hat. Aber das tun sie nicht. So wie es jetzt eingerichtet ist, ändert die Reihenfolge des Anklickens die angezeigten Zeilen. Ich muss also eine Funktion erstellen, die prüft, welche Kontrollkästchen aktiviert sind, und die Zeilen anzeigt, die eines dieser Kästchen enthalten. Ich bin nicht abgeneigt, eine Schaltfläche hinzuzufügen, um dies zu erreichen.
Ich wäre für jede Hilfe (und jeden Hinweis auf Quellen, die mir beim Lernen helfen könnten) dankbar, die ihr mir geben könntet!
