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.


Anwendbar auf:

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

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:


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

Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/DOM/Document/forms/elements/checked&oldid=99280“