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:
-
<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.











Eigentlich ja analog zu JS.
Naja
DOM-Traversal in JS ist etwas komplizierter als das obenstehende
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…
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!