JavaScript/DOM/Document/forms/elements/checked
Die Eigenschaft checked speichert, ob bzw. dass ein Radio- oder Checkbutton aktiviert ist oder nicht. Mögliche Werte sind true oder false.
Anwendbar auf:
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'); } } });
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.
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:
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.'; } });
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.