JQuery: Radio Buttons auslesen und manipulieren

In zweiten Artikel der Serie Formular-Felder auslesen und manipulieren mit JQuery beschäftige ich mich mit Radio Buttons und stelle im Folgenden Lösungen für häufige Probleme mittels JQuery vor.

Wer tiefer in JQuery einsteigen möchte und ein gutes deutschsprachiges Buch sucht, dem empfehle ich jQuery: Das Praxisbuch (Galileo Computing)

Wert (value) einer Radio Group auslesen

Mit folgendem jQuery-Code-Fragment kann man den Wert (value) einer Radio Group auslesen.

$('#radio-button-value').click(function(){
alert($("input[name='radio-button-gruppe']:checked").val());
});

Mittels des JQuery $-Selektors $("input[name='radio-button-gruppe']") werden die Radiobuttons ausgewählt, deren Name-Attribut den Wert radio-button-gruppe hat, bzw. die zu dieser Radio Group gehören. Mittels :checked wird die Auswahl auf den ggf. ausgewählten (checked) reduziert. Ist kein Radio Button checked, so ist die Auswahl leer. Über die JQuery-Funktion val() wird der Wert des ausgewählten (checked) Radio Buttons ausgelesen.

Prüfen, ob ein Radio Button innerhalb einer Radio Group checked

Mit folgendem jQuery-Code-Fragment kann man prüfen, ob ein Radio Button innerhalb einer Radio Group gewählt (checked) ist.

$('#radio-button-is-set').click(function(){
alert(typeof $("input[name='radio-button-gruppe']:checked").val() != 'undefined');
});

Die Vorgehensweise ist analog zu Wert einer Radio Group auslesen. Abschließend wird über typeof var != 'undefined' geprüft, ob ein Wert gesetzt ist. Falls ein Button checked ist, so liefert die Funktion true, sonst false.

Radio Button über Id auswählen (check)

Mit folgendem jQuery-Code-Fragment kann man einen Radio Button anhand seiner Id auswählen (check).

$('#radio-checked-by-id').click(function(){
$("#gruppe1").attr("checked","checked");
});

Über den jQuery-$-Selektor wird der Radio Button mit der Id gruppe1 ausgewählt und in diesem das Attribut checked auf den Wert checked gesetzt. Der Radio Button ist nun ausgewählt.

Radio Button über Wert (value) auswählen (check)

Mit folgendem jQuery-Code-Fragment kann man einen Radio Button anhand seines Wertes (value) auswählen (check).

$('#radio-checked-by-value').click(function(){
$("input[name='radio-button-gruppe'][value='2']").attr("checked","checked");
});

Über den jQuery-$-Selektor werden mittels input[name='radio-button-gruppe'] alle Radio Buttons der Radio Group radio-button-gruppe ausgewählt. Die Auswahl wird nun mittels [value='2'] auf den Button reduziert, dem der Wert (value) 2 zugeordnet ist. Das weitere Vorgehen entspricht dem bei Radio Button über Id auswählen (check)

Radio Group Auswahl aufheben (uncheck)

Mit folgendem jQuery-Code-Fragment kann man ausgewählte Radio Buttons innerhalb einer Radio Group abwählen (uncheck).

$('#radio-uncheck').click(function(){
$("input[name='radio-button-gruppe']:checked").removeAttr("checked");
});

Über den jQuery-$-Selektor werden mittels input[name='radio-button-gruppe'] alle Radio Buttons der Radio Group radio-button-gruppe ausgewählt. Die Auswahl wird nun mittels :checked auf den ggf. ausgewählten Radio Button reduziert. In diesem Radio Button wird das Attribut checked mittels der JQuery Funktion removeAttr() gelöscht. Die Radiobox ist nun nicht mehr ausgewählt (checked).

Demonstration

Lauffähige Demostration