JavaScript Checkbox onChange
-
Utilisez
onChangecomme attribut sur la case à cocher en JavaScript -
Utilisez
onChangesur la case à cocher en tant que propriété JavaScript -
Utilisez
addEventListenerpouronChangeen JavaScript
L’événement onChange de JavaScript se concentre sur la modification d’une valeur d’un élément. Lorsqu’un événement spécifique est exécuté, il est déclenché et renvoie quelque chose de préféré.
L’événement onChange fonctionne juste après que l’élément a perdu son focus. Il se déclenche juste après avoir cliqué, et la différence entre onClick et onchange est subtile.
Nous discuterons des méthodes les plus utilisées de onChange en tant qu’attribut HTML, propriété JavaScript et écouteur d’événement.
Utilisez onChange comme attribut sur la case à cocher en JavaScript
L’attribut onchange fait référence à une fonction JavaScript avec un corps de code pour déclencher le système. L’instance ici a une case à cocher, et lorsqu’elle est cochée, elle exécutera une fonction qui décrira le changement.
Extrait de code:
<!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>
Production :
Le mot clé this fait référence à un objet global, et l’attribut onChange saisit et déclenche la fonction Check. Le value.checked renvoie une sortie booléenne dans le corps HTML en fonction du statut de la bascule.
Utilisez onChange sur la case à cocher en tant que propriété JavaScript
Dans ce cas, on déclare un objet qui fait référence au certain id = "check". Après cela, nous appellerons la propriété object.onchange pour initialiser une fonction qui s’exécute sur les bascules.
Extrait de code:
<!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>
Production :
Tapez la fonction function(value) pour faciliter le codage ; même si vous n’ajoutez pas value comme argument, cela a le même résultat.
Utilisez addEventListener pour onChange en JavaScript
Le addEventListener a un événement change qui ne se déclenche pas tant que le focus n’est pas modifié. L’opération principale appelle le event listener et active l’événement change. L’autre code de fonction résulte lorsque le focus est perdu.
Extrait de code:
<!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>
Production :
L’objet est déclaré et le addEventListener est appelé pour continuer avec l’autre corps de fonction.
