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.

Der Code für die Radiobuttons:

CODE:
  1. <input type="radio" name="chooser" value="value1" id="radio1" />
  2. <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:

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

Ein komplettes Beispiel:

CODE:
  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.         $("#radio1").click( function() {
  4.             if ($("#radio1:checked").val() == "value1") {
  5.                 alert("Der erste Radiobutton wurde ausgewählt");
  6.             }
  7.         });
  8.     });
  9. </script>
  10. <input type="radio" name="chooser" value="value1" id="radio1" /> Radiobutton1<br />
  11. <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:

CODE:
  1. <script type="text/javascript">
  2.     $(document).ready(function(){
  3.         $(this).find("input:radio[name='chooser']").click(function() {
  4.             alert($("input:radio:checked[name='chooser']").val());
  5.         });
  6.     });
  7. </script>
  8. <input type="radio" name="chooser" value="value1" id="radio1" /> Radiobutton1<br />
  9. <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.

4 Antworten zu “jQuery: Prüfen, ob ein Radiobutton ausgewählt (checked) ist”


Eine Antwort hinterlassen

XHTML: Du kannst folgende Elemente benutzen <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> :