JavaScript Checkbox onChange

Anika Tabassum Era 30 enero 2023
  1. Use onChange como atributo en la casilla de verificación en JavaScript
  2. Use onChange en la casilla de verificación como propiedad de JavaScript
  3. Use addEventListener para onChange en JavaScript
JavaScript Checkbox onChange

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:

onchange_attribute

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:

onchange_property

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:

addeventlistener_onchange

Se declara el objeto y se llama a addEventListener para continuar con el otro cuerpo de la función.

Anika Tabassum Era avatar Anika Tabassum Era avatar

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

LinkedIn Facebook

Artículo relacionado - JavaScript Checkbox