JavaScript/DOM/Document/forms/elements/checked

Aus SELFHTML-Wiki
< JavaScript‎ | DOM‎ | Document‎ | forms‎ | elements
Wechseln zu: Navigation, Suche

Die Eigenschaft checked speichert, ob bzw. dass ein Radio- oder Checkbutton aktiviert ist oder nicht. Mögliche Werte sind true oder false.

  • DOM 1.0
  • JavaScript 1.1
  • IE
  • Firefox
  • Chrome
  • Safari
  • Opera
  • Lesen, Schreiben / Read, Write

Anwendbar auf:

Beispiel: Formular ansehen …
  document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('ablehnen').checked = true;
    document.querySelector('#agb').addEventListener('click', weiter);
 
    function weiter() {	  
      if (document.getElementById('akzeptieren').checked  == true) {
        document.getElementById('persAngaben').removeAttribute('disabled');
      }
      if (document.getElementById('ablehnen').checked  == true) {
        document.getElementById('persAngaben').setAttribute('disabled','disabled');
      }
    }
  
  });
Das Beispiel enthält ein Formular mit zwei Radio-Buttons. Erst wenn Benutzer die AGB akzeptieren, wird das ausgegraute Formular freigeschaltet.

document.getElementById('ablehnen').checked = true; setzt den Ablehnen-Button auch beim Neuladen wieder auf true , d.h. auf AGB ablehnen.
Mit AddEventListener wird an das fieldset mit der id persAngaben ein Event-Handler angehängt, der bei einem Klick die Funktion weiter() aufruft.

In dieser Funktion wird überprüft, ob der Akzeptieren-Radio-Button angeklickt wurde. Dann wird das ausgegraute fieldset aktiviert, indem das disabled-Attribut mit der Methode removeAttribute entfernt wird. Wenn der Benutzer wieder auf "Ablehnen" geht, wird das disabled-Attribut mit setAttribute wieder gesetzt.

checked bei Radiobuttons und Checkboxen[Bearbeiten]

Früher mussten bei mehreren Radiobuttons innerhalb einer Schleife alle Elemente einzeln mit GetElementById angesprochen und dann überprüft werden, ob sie angeklickt waren und die checked-Eigenschaft true ergab.

Browser können aber als Selektor die CSS-Pseudoklasse :checked verwenden. Mit der querySelector-Methode ist es möglich, auch komplexere Selektoren zum Ansprechen von Elementen zu verwenden:


Beispiel: Formular ansehen …
document.addEventListener("DOMContentLoaded", function () {

  document.querySelector('#modi').addEventListener('change', getChecked);
  
  function getChecked() {
    var operator = document.querySelector('input[name="op"]:checked').id;
    document.querySelector('output').innerHTML = 'Der Radio-Button mit der id<code> '+ operator +' </code> wurde angeklickt.';
  }
	
  });
Mit querySelector('input[name="op"]:checked') kann zielgenau das angeklickte input-Element mit dem name-Attribut op selektiert werden. Die so erhaltene id wird anschließend ausgegeben.

Weblinks[Bearbeiten]