JavaScript Kontrollkästchen onChange
-
Verwendung von
onChangeals Attribut für die Checkbox in JavaScript -
Verwendung von
onChangeauf Checkbox als JavaScript-Eigenschaft -
Verwendung von
addEventListenerfüronChangein JavaScript
Das JavaScript-Ereignis onChange konzentriert sich auf die Änderung eines Werts eines Elements. Wenn ein bestimmtes Ereignis ausgeführt wird, wird es ausgelöst und gibt etwas Bevorzugtes zurück.
Das Ereignis onchange funktioniert, sobald das Element seinen Fokus verliert. Es wird direkt nach dem Klicken ausgelöst, und der Unterschied zwischen onClick und onChange ist subtil.
Wir werden die am häufigsten verwendeten Methoden von onChange als HTML-Attribut, JavaScript-Property und Event-Listener besprechen.
Verwendung von onChange als Attribut für die Checkbox in JavaScript
Das Attribut onchange bezieht sich auf eine JavaScript-Funktion mit einem Code-Body, um das System auszulösen. Die Instanz hier hat ein Kontrollkästchen, und wenn sie aktiviert ist, führt sie eine Funktion aus, die die Änderung darstellt.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<label>
<input type="checkbox" onchange="Check(this)" /> CHECK as onchange attribute
</label>
<p id="verdict"></p>
<script>
function Check(value) {
document.getElementById('verdict').innerHTML = value.checked;
};
</script>
</body>
</html>
Ausgabe:
Das Schlüsselwort this bezieht sich auf ein globales Objekt, und das Attribut onChange greift und löst die Check-Funktion aus. value.checked gibt basierend auf dem Umschaltstatus eine boolesche Ausgabe im HTML-Body zurück.
Verwendung von onChange auf Checkbox als JavaScript-Eigenschaft
In diesem Fall deklarieren wir ein Objekt, das auf die bestimmte id = "check" verweist. Danach rufen wir die Eigenschaft object.onchange auf, um eine Funktion zu initialisieren, die beim Umschalten ausgeführt wird.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<label>
<input type="checkbox" id="check" /> CHECK for oncheck property
</label>
<p id="verdict"></p>
<script>
var y = document.getElementById('check');
y.onchange = function(value){
document.getElementById('verdict').innerHTML = y.checked;
};
</script>
</body>
</html>
Ausgabe:
Geben Sie die function(value) ein, um die Codierung zu erleichtern; auch wenn Sie value nicht als Argument hinzufügen, hat es das gleiche Ergebnis.
Verwendung von addEventListener für onChange in JavaScript
Der addEventListener hat ein change-Ereignis, das nicht ausgelöst wird, bis der Fokus geändert wird. Die Hauptoperation ruft den event listener auf und aktiviert das change-Event. Der andere Funktionscode ergibt sich, wenn der Fokus verloren geht.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<label>
<input type="checkbox" id="check" /> CHECK for addEventListener
</label>
<p id="verdict"></p>
<script>
var y = document.getElementById('check');
y.addEventListener('change', function(){
document.getElementById('verdict').innerHTML = y.checked;
});
</script>
</body>
</html>
Ausgabe:
Das Objekt wird deklariert und der addEventListener wird aufgerufen, um mit dem anderen Funktionskörper fortzufahren.
