Checkboxen Buttons auslesen <input type="checkbox">

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

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

Zugriff auf Checkboxen

<input type="checkbox" name="farbe" value="gelb">
<input type="checkbox" name="farbe" value="orange" checked>
<input type="checkbox" name="farbe" value="rot">
<input type="checkbox" name="farbe" value="blau" checked>
<p id="output"></p>

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

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

Wie jedes Array kann man die Elemente über den Array-Zugriffsoperator ansprechen. In einer for -Schleife kann man alle Elemente des Arrays durchlaufen.

chBx[0].value
chBx[0].checked

Oder man nutzt eine for-Schleife, um alle Elemente anzusprechen Beispiel

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

Die aktivierten Werte aus mehreren Checkboxen auslesen

Beispiel

Möchte man die Werte der aktivierten Checkboxen auslesen, durchläuft man die Elemente und fragt die Eigenschaft checked ab.

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

Beispiel
Ein Button mit der id="btn" ruft diese function auf.

    var btn = document.getElementById("btn");
    var chBx = document.querySelectorAll("input[name='farbe']");
    var output = document.getElementById("output");
        
    btn.addEventListener("click", checkCheck);
     function checkCheck(){
       output.innerHTML ="";
        for(var i=0; i < chBx.length; i++){     
            if(chBx[i].checked == true){
                output.innerHTML += chBx[i].value;
            }
        }
    }

Den Wert der angeklickten Checkbox abrufen / change

Beispiel

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

    for(var i = 0; i < chBx.length; i++){
        chBx[i].addEventListener("change", checkCheck);
    }
   
     function checkCheck(evt){
       output.innerHTML =  evt.currentTarget.value+" Wert: "+evt.currentTarget.checked;   
     }

eine Checkbox

Eine Checkbox auf true oder false abfragen. Im folgenden Beispiel erfolgt der Funktionsaufruf über einen HTML Event Handler

Beispiel

HTML

<input type="checkbox" id="checki" onclick="checkIt()">
<p id="output"></p>

Javascript

function checkIt() {
    var aktiv = document.getElementById("checki").checked;
    document.getElementById("output").innerHTML = aktiv;
}
  

 

Javascript Tipps