Radio Buttons auslesen <input type="radio">

Möglichkeiten Radiobuttons auzulesen, mit und ohne Formularelement.

Gewählten Radiobutton in einem Formular auswerten

Der Wert des name Attributes der Radiobuttons bestimmt eine Gruppe von zusammengehörenden Radiobuttons. Diese Gruppe kann innerhalb eines Formulars über diesen Namen angesprochen werden. Folgendermaßen, kann man den Wert des gewählten Radiobuttons ermitteln: document.Formularname.Radiobuttonname.value

document.form1.farbe.value

siehe Beispiel

Achtung Man beachte, dass beim Aufruf der Funktion, das Formular nicht verschickt werden darf, da ansonsten diese Seite oder die Seite, die im action Attribut des Form-Elements angegeben ist, geladen würde. Dadurch würde die Ausgabe nicht angezeigt. Um das zu verhindern, gibt es drei Möglichkeiten:

  1. Der Button, welcher die Funktion aufruft liegt außerhalb des form-Elements.
  2. In der aufgerufenen Funktion wird mit dem Event-Parameter evt.preventDefault() hinzugefügt, was soviel bedeutet wie: Standardverhalten verhindern.
  3. Im HTML Markup des Form Elements wird folgendes action Attribut eingefügt: <form action="javascript:void">

HTML

<form name="form1">
<input type="radio" name="farbe" value="gelb">
<input type="radio" name="farbe" value="orange">
<input type="radio" name="farbe" value="rot">
<input type="radio" name="farbe" value="blau">
<input type="submit" id="btn">
</form>

<p id="output"></p>

Javascript

    var output = document.getElementById("output");
    var btn = document.getElementById("btn");

    btn.addEventListener("click", checkRd);

    function checkRd(evt) {
      evt.preventDefault();
      output.innerText =  document.form1.farbe.value;
    }

Gewählten Button über querySelector aurufen.

Hier eine Alternative den Wert des gewählten Radio-Buttons zu ermitteln. In CSS kann man über die Pseudoklasse :checked ein gewähltes Element auswählen. Das kann man in Javascript mit dem querySelector nutzen.

Die Radio-Buttons müssen nicht innerhalb eines form-Elements liegen.

document.querySelector('input[name="farbe"]:checked').value;

siehe Beispiel

Change Event

Den Wert abrufen, wenn irgendein Radio-Button angeklickt wurde

Beispiel

Das change Ereignis tritt ein, wenn man den Wert eines Eingabefeldes oder Radio-Buttons geändert hat.
Im folgenden Beispiel liefert der Event-Listener über currentTarget das angeklickte Element und daraus den Wert.

    var rdBtn = document.querySelectorAll("input[name='farbe']");
    var output = document.getElementById("output");
        
    for(var i = 0; i < rdBtn.length; i++){
        rdBtn[i].addEventListener("change", checkRd);
    }
   
     function checkRd(evt){
       output.innerHTML =  evt.currentTarget.value;   
     }

Mehrere Buttons mit einer Schleife durchlaufen

Im folgenden werden die Buttons in Schleifen durchlaufen.

Radio Buttons haben unter anderem die Attribute checked, value. Diese kann man in Javascript folgendermaßen ermitteln.

Wenn man mittels DOM Methode querySelectorAll() auf mehrere Radio Buttons zugreift, bekommt man ein Array.

let rdBtn = document.querySelectorAll("input[name='farbe']");

let rdBtn = document.getElementsByName("farbe");

Wie jedes Array kann man die Elemente über den Array-Zugriffsoperator ansprechen.

rdBtn[0].value
rdBtn[0].checked

In einer for -Schleife kann man alle Elemente des Arrays durchlaufen.Beispiel

    for(var i=0; i < rdBtn.length; i++){
        output.innerHTML += rdBtn[i].value;
    }

Den aktivierten Wert mit Schleife auslesen

Beispiel

Folgende Methoden sind nicht so elegant wie die anfangs aufgezeigten Möglichkeiten.

Möchte man den Wert des aktivierten Radio Buttons auslesen, durchläuft man die Elemente und fragt die Eigenschaft checked ab. 

    for(var i=0; i < rdBtn.length; i++){     
        if(rdBtn[i].checked == true){
            output.innerHTML = rdBtn[i].value;
        }
    }

Beispiel
Diese Schleife kann man in eine Funktion legen und per Mausklick aufrufen. 

btn.addEventListener("click", checkRd);
    
 function checkRd(){
      for(var i=0; i < rdBtn.length; i++){
        if(rdBtn[i].checked == true){
            output.innerHTML = rdBtn[i].value;
        }
    }   
 }

2 Radio Buttons

Beispiel

Hat man nur 2 Radiobuttons, braucht man lediglich einen der beiden auf checked abfragen, da der andere Button automatisch den gegenteiligen boolschen Wert hat.

    var rdBtn = document.getElementById("jaBtn");
    var output = document.getElementById("output");
    var btn = document.getElementById("btn"); 
    btn.addEventListener("click", checkRd);
    
     function checkRd(evt){
         if(jaBtn.checked){
            output.innerHTML =  "Sie haben sich für einen Newsletter entschieden.";  
         }else{
            output.innerHTML = "Sie möchten keinen Newsletter." 
         }
     }

 

Javascript Tipps