Radio Buttons auslesen <input type="radio">

Radio Buttons haben unter anderem 2 wichtige Eigenschaften: value und checked.

• myRadioBtn.value = Wert des Html-Attributs value Beispiel
• myRadioBtn.checked = Ein boolscher Wert, der true liefert, wenn der Radio Button aktiviert ist. Beispiel

Zugriff auf Radio-buttons

<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">
<p id="output"></p>

Wenn man mittels DOM Methoden auf mehrere Radio Buttons zugreift, bekommt man ein Array.

let rdBtn = document.querySelectorAll("input[name='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 aus mehreren Radio-Buttons auslesen

Beispiel

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;
        }
    }   
 } 

Den Wert abrufen, wenn irgendein Radio-Button angeklickt wurde / change

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;   
     }

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