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

sieh auch folgendes Beispiel

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

Oder man nutzt ein forEach Schleife, sofern man die checkboxen mit einer Nodelist angesprochen hat. Beispiel

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