La casilla de verificación Eventos de OnClick en JavaScript

La casilla de verificación es un elemento de entrada HTML que permite al usuario elegir una de varias opciones. Al igual que con los formularios HTML, hay una casilla de verificación para género, hombre o mujer. O a veces, los términos y condiciones deben aprobarse antes de enviar el formulario. El "al hacer clicEl evento se adjuntará a la casilla de verificación, y se activará o ejecutará cuando se haga clic en una casilla de verificación.

Este artículo demostrará la casilla de verificación Evento en JavaScript.

La casilla de verificación Eventos de OnClick en JavaScript

El "al hacer clic"Es un evento que se activará cuando el usuario verifique la casilla de verificación. El evento OnClick se adjuntará con la casilla de verificación por:

• Usando el atributo OnClick dentro de la etiqueta HTML
• Aplicando una función en el atributo OnClick de un elemento HTML en JavaScript
• Agregar explícitamente un oyente de eventos en el "hacer clic" evento

Usemos todos estos uno por uno.

Ejemplo 1: casilla de verificación Evento OnClick usando el atributo OnClick dentro de la etiqueta HTML
Cree una casilla de verificación en un archivo HTML con la ID "aceptar"Y adjuntar un"al hacer clic"Evento con él que ejecutará la función checkClickFunc () Escrito en la parte JavaScript:

Propiedad OnClick en HTML llamando a la función JavaScript

Acordar términos y condiciones

Use las líneas de código a continuación en un archivo JavaScript:

función checkClickFunc ()

casilla de verificación var = documento.getElementById ('de acuerdo');
if (casilla de verificación.marcado == Verdadero)

alerta ("Se hace clic en la casilla de verificación");

En el código anterior,

• Crear la función checkClickFunc () que se ejecutará al hacer clic en la casilla de verificación.
• Utilizando el "getElementById ()"Método, recupere la casilla de verificación por su ID", "aceptar".
• Verifique el estado de la casilla de verificación utilizando el "comprobado" atributo.
• Si es "verdadero", Muestre un mensaje de alerta"Se hace clic en la casilla de verificación".

Producción

Ejemplo 2: casilla de verificación Evento OnClick aplicando una función en el atributo OnClick de un elemento HTML en JavaScript
En este ejemplo, JavaScript se usará para dar un valor al al hacer clic Atributo del elemento HTML en lugar de en la etiqueta HTML.

Cree una casilla de verificación y asigne una ID que luego se accedirá en JavaScript:

Casilla de verificación OnClick usando JavaScript

Acordar términos y condiciones

En el siguiente paso, se accederá a la casilla de verificación utilizando su ID "aceptar" y un "al hacer clicEl atributo se adjuntará. En la casilla de verificación, haga clic, se ejecutará la función definida y se mostrará un mensaje de alerta:

documento.getElementById ("de acuerdo").onClick = function checkClickFunc ()
alerta ("Se hace clic en la casilla de verificación");

La salida correspondiente será:

Ejemplo 3: casilla de verificación Evento de OnClick agregando explícitamente el oyente del evento en el evento "Click"
Aquí, la casilla de verificación Evento OnClick se establecerá utilizando el JavaScript "addEventListener ()" método:

Casilla de verificación OnClick usando JavaScript a través de AddEventListener

Acordar términos y condiciones

En el archivo JavaScript, use el código dado:

documento.getElementById ("de acuerdo").addEventListener ("Haga clic", checkClickFunc);
función checkClickFunc ()
alerta ("Se hace clic en la casilla de verificación");

En el fragmento de código anterior,

• Primero, obtenga la casilla de verificación con su ID y luego adjunte un "addEventListener ()"Método al pasar un"hacer clic"Evento y una función"CheckClickFunc"Que se llamará en la casilla de verificación Haga clic en.
• Defina una función "checkClickFunc ()", Que se activará al hacer clic en la casilla de verificación y muestra un mensaje de alerta:

Producción

Conclusión

La casilla de verificación de los eventos OnClick son eventos realizados cuando una casilla de verificación está marcada como "comprobado". Estos eventos no se aplican de forma predeterminada en un elemento de casilla de verificación del documento HTML. Por lo tanto, el usuario debe agregar manualmente los eventos para realizar una funcionalidad específica. Hay tres formas diferentes de agregar un "al hacer clic"Evento y realización de una acción sobre ese evento con la ayuda de JavaScript. Este artículo explica estos tres métodos junto con ejemplos.