JavaScript Checkbox onChange
-
Use
onChangecomo atributo en la casilla de verificación en JavaScript -
Use
onChangeen la casilla de verificación como propiedad de JavaScript -
Use
addEventListenerparaonChangeen JavaScript
El evento onChange de JavaScript se centra en cambiar el valor de un elemento. Cuando se ejecuta un evento específico, se activa y devuelve algo de preferencia.
El evento onchange funciona justo después de que el elemento pierde su foco. Se dispara justo después de hacer clic, y la diferencia entre onClick y onChange es sutil.
Discutiremos los métodos más utilizados de onChange como un atributo HTML, una propiedad JavaScript y un detector de eventos.
Use onChange como atributo en la casilla de verificación en JavaScript
El atributo onchange se refiere a una función de JavaScript con un cuerpo de código para activar el sistema. La instancia aquí tiene una casilla de verificación y, cuando está marcada, ejecutará una función que representará el cambio.
Fragmento de código:
<!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>
Producción:
La palabra clave this se refiere a un objeto global, y el atributo onChange captura y activa la función Check. El value.checked devuelve una salida booleana en el cuerpo HTML en función del estado de alternancia.
Use onChange en la casilla de verificación como propiedad de JavaScript
En este caso, declaramos un objeto que hace referencia al determinado id = "check". Después de eso, llamaremos a la propiedad object.onchange para inicializar una función que se ejecuta al alternar.
Fragmento de código:
<!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>
Producción:
Escriba la función function(value) para facilitar la codificación; incluso si no agrega value como argumento, tiene el mismo resultado.
Use addEventListener para onChange en JavaScript
El addEventListener tiene un evento de change que no se activa hasta que se cambia el enfoque. La operación principal llama al event listener y activa el evento change. El otro código de función resulta cuando se pierde el foco.
Fragmento de código:
<!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>
Producción:
Se declara el objeto y se llama a addEventListener para continuar con el otro cuerpo de la función.
