jQuery: Prüfen, ob ein Radiobutton ausgewählt (checked) ist

Bei meinem PayPal-Kalkulator bin ich auf das Problem gestoßen, dass ich mit jQuery prüfen wollte, ob ein Radiobutton ausgewählt worden ist. Die Lösung ist eigentlich eine recht einfache, jedoch bin ich nicht sofort fündig geworden.

Werbung


Der Code für die Radiobuttons:

<input type="radio" name="chooser" value="value1" id="radio1" />
<input type="radio" name="chooser" value="value2" id="radio2" />

Um jetzt nur zu prüfen ob der erste Radiobutton ausgewählt wurde, wird der folgende jquery-Code benötigt:

if ($("#radio1:checked").val() == "value1") {
alert("Der erste Radiobutton wurde ausgewählt");
}

Ein komplettes Beispiel:

<script type="text/javascript">
	$(document).ready(function(){
		$("#radio1").click( function() {
			if ($("#radio1:checked").val() == "value1") {
				alert("Der erste Radiobutton wurde ausgewählt");
			}
		});
	});
</script>
<input type="radio" name="chooser" value="value1" id="radio1" /> Radiobutton1<br />
<input type="radio" name="chooser" value="value2" id="radio2" /> Radiobutton2

Allerdings muss man nicht zwingend die id=““ vergeben, denn jquery kann dank eines exzellenten DOM-Traversal natürlich auch gleich auf das Input-Element zugreifen. Mein Eindruck ist, dass es so sogar schneller geht, als per id.
Kompletter Code für beide Buttons:

<script type="text/javascript">
	$(document).ready(function(){
		$(this).find("input:radio[name='chooser']").click(function() {
			alert($("input:radio:checked[name='chooser']").val());
		});
	});
</script>
<input type="radio" name="chooser" value="value1" id="radio1" /> Radiobutton1<br />
<input type="radio" name="chooser" value="value2" id="radio2" /> Radiobutton2<br />

Codeerklärung: Nach dem Laden des Dokuments (document.ready-Function) wird an alle Input-Elemente mit den Eigenschaften „type=’radio'“ und „name=’chooser'“ an das Event „click“ ein alert gehängt, der den Inhalt des ausgewählten (checked) Radiobuttons ausgibt. Für weitere Details zu Selektoren in jQuery gibt es eine Dokumentation.

Veröffentlicht von

Uli

IT-Nerd und Admin

8 Gedanken zu „jQuery: Prüfen, ob ein Radiobutton ausgewählt (checked) ist“

  1. danke fürs „vorlesen“. habe die gleichen probleme gehabt wie du und auch nicht in die doku geguckt 🙂 ich bin ja immer mehr begeistert von jquery…

  2. Vorsicht mit dem ersten Beispiel, wo eine Element-ID angegeben wird. Wenn im HTML-Code statisch für das Input-Radio das Attribut checked=“checked“ gesetzt wurde, so wertet Jquery diesen Fall auch als checked, wenn eigentlich ein anderes Input-Radio mit dem gleichen Namen ausgewählt wurde!

  3. Ein Frage zu dem Script, wie kann ich den Click von den Radio Buttons chooser2 abfragen? Wenn chooser1 oder chooser2 geklickt wird soll das alert ausgegeben werden?

    $(document).ready(function(){
    $(this).find("input:radio[name='chooser']").click(function() {
    alert($("input:radio:checked[name='chooser']").val()+" "+$("input:radio:checked[name='chooser2']").val());
    });
    });

    Radiobutton1
    Radiobutton2
    Radiobutton3

    Radiobutton4
    Radiobutton5
    Radiobutton6

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

I accept that my given data and my IP address is sent to a server in the USA only for the purpose of spam prevention through the Akismet program.More information on Akismet and GDPR.