La casilla de verificación Eventos de OnClick en JavaScript
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.