Den Status von Checkboxen mit jQuery abfragen
Viele Leser dieses Blogs haben mich in der Vergangenheit gefragt, wie man mit den jQuery-Selektoren die ausgewählten Checkboxen aus einem HTML-Dokument extrahieren kann.
Eigentlich ist die Geschichte ja relativ einfach, aber da dieses Thema offenbar vielen auf den Nägeln brennt, möchte ich hier nochmals eine kleine Zusammenstellung aufführen.
Als erstes brauchen wir also einen Ausgangscode:
1 2 3 | <p><input type="checkbox" class="myCheckbox" value="1" />Auswahl 1</p> <p><input type="checkbox" class="myCheckbox" value="2" />Auswahl 2</p> <p><input type="checkbox" value="3" />Auswahl 3</p> |
Theoretisch wäre es natürlich möglich, die Checkboxen später direkt über das HTML-Element aus dem DOM zu extrahieren, aber da in einem Dokument oftmals unterschiedliche Felder vorkommen können, kennzeichne ich die betroffenen Checkboxen mit der zusätzlichen CSS-Klasse myCheckbox.
Die vom Nutzer aktivierten Checkboxen können nun wie folgt ermittelt werden:
1 2 3 4 5 6 7 | // Die markierten Elemente selektieren
var elements = $("input.myCheckbox:checked");
// Schleife über die einzelnen Elemente
$.each(elements, function(index, item) {
alert("Value:" + $(this).val());
}); |
Ihr seht schon, dass die Selektion der aktivierten Checkboxen über jQuery sehr einfach ist und mit wenigen Codezeilen umgesetzt werden kann. Eigentlich braucht es dazu auch kein Tutorial, aber vielleicht hilft dieser Beitrag ja dem ein oder anderen in Zukunft weiter.
