JavaScript/DOM/Document/forms/elements/defaultChecked
Die Eigenschaft defaultChecked gibt die Default-Einstellung für Radio-Buttons und Checkboxen zurück, wie sie im HTML Code mittels des checked Attributes gesetzt wurden/ sind. Bei Aktivierung/ Auswahl eines Radio-Buttons oder einer Checkbox gibt die Eigenschaft den Wert true zurück, andernfalls false.
Anwendbar auf:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS-Beispiel: defaultChecked</title>
<script>
function Status() {
var meinung = document.getElementById('bewertung_keine');
var status_default_meinung = meinung.defaultChecked;
var status_aktuell_meinung = meinung.checked;
var zustimmung = document.getElementById('erlaubnis');
var status_default_zustimmung = zustimmung.defaultChecked;
var status_aktuell_zustimmung = zustimmung.checked;
var meldung = '';
if(status_default_meinung !== status_aktuell_meinung) {
meldung = 'Der Benutzer hat eine Bewertung abgegeben.';
}
else {
meldung = 'Der Benutzer hat keine Bewertung abgegeben.';
}
if(status_default_zustimmung !== status_aktuell_zustimmung) {
meldung += '\r\rDer Benutzer hat seine Zustimmung zur Auswertung zurückgezogen.';
}
alert(meldung);
}
</script>
</head>
<body>
<form>
<fieldset>
<legend>Bewertung</legend>
<p>Finden Sie dieses Beispiel hilfreich?</p>
<p>
<input type="radio" name="bewertung" id="bewertung_ja" value="ja">
<label for="bewertung_ja">Ja</label>
</p>
<p>
<input type="radio" name="bewertung" id="bewertung_nein" value="nein">
<label for="bewertung_nein">Nein</label>
</p>
<p>
<input type="radio" name="bewertung" id="bewertung_keine" value="unentschieden" checked>
<label for="bewertung_keine">Keine Meinung</label>
</p>
</fieldset>
<p>
<input type="checkbox" id="erlaubnis" value="erteilt" checked>
<label for="erlaubnis">Ja, meine Bewertung darf für statistische Auswertungen erfasst werden.</label>
</p>
<button onclick="Status();">Prüfe Status der Radio-Buttons und Checkbox</button>
</form>
</body>
</html>
Das Beispiel enthält ein Formular mit drei Radio-Buttons, einer Checkbox und einem Button. Im JavaScript-Bereich im Kopf der Seite ist die Funktion Status() definiert, die per onclick-Handler bei Klick auf den Button aufgerufen wird.
In der Funktion werden die beiden Formular Elemente 'bewertung_keine' (der dritte Radio-Button) und 'erlaubnis' (die Checkbox) jeweils mittels document.getElementById('Element-ID') einer Variablen zugewiesen. Anschließend werden der Default-Status (status_default_...) per Element.defaultChecked, sowie der aktuelle Status (status_aktuell_...) per Element.checked ermittelt und ebenfalls jeweils in einer Variablen gespeichert. In beiden Fällen handelt sich um Boolean-Werte, die also entweder true oder false sind.
Im nächsten Schritt werden jeweils die beiden Werte (Default-Status und aktueller Status) mittels einer bedingten Anweisung if (...) miteinander verglichen (unter Verwendung des "typgenauen" Vergleichsoperators, da beide Werte vom gleichen Datentyp sind) und entsprechend dem Ergebnis des Vergleichs ein Text für die am Ende anzuzeigende Alert-Box definiert.
Die dem Beispiel zugrunde liegende Logik ist die, dass sowohl der dritte Radio-Button (mit der ID 'bewertung_keine'), als auch die Checkbox (mit der ID 'erlaubnis') per Default aktiviert/ ausgewählt sind. Sind sie es also im aktuellen Zustand nicht mehr, dann muss der User folglich einen anderen Radio-Button angeklickt haben, bzw. die Checkbox deaktiviert/ abgewählt haben.
Element.removeAttribute('checked') entfernt wurde, liefert die Eigenschaft den Wert false zurück!
