Cómo mostrar texto cuando la casilla de verificación se verifica en JavaScript?

La opción del gráfico se verifica ahora!

La opción de línea se verifica ahora!

Aquí, declara una función llamada "CheckFunction ()". En su definición, aplique la condición en cada una de las casillas de verificación con la ayuda del "comprobado"Propiedad accediendo a su ID mostrando directa y de manera similar el mensaje correspondiente también contra la ID obtenida de los párrafos asignados utilizando el"mostrar" propiedad:

La salida correspondiente será:

Desde la salida, se puede observar claramente que se muestra un texto específico cuando se selecciona una casilla de verificación específica.

Ejemplo 2: Mostrar texto Cuando la casilla de verificación se verifica en JavaScript utilizando la propiedad marcada con la propiedad inntaxt
Esta propiedad se puede aplicar para acceder a las casillas de verificación especificadas y notificar al usuario de la opción marcada en el modelo de objeto de documento (DOM).

Ejemplo

En primer lugar, incluye de manera similar el siguiente encabezado y casillas de verificación con el especificado "identificación" y un "al hacer clic"Redirección de eventos a la caja de verificación de funciones ()::

Mostrar texto cuando se verifica la casilla de verificación

Pitón


Java


Javascript

Después de eso, defina una función llamada "caja()". La siguiente función en el siguiente paso obtendrá la ID de las casillas de verificación especificadas utilizando el "documento.getElementById ()" método.

Además, aplique una verificación en cada una de las casillas de verificación. Por ejemplo, si se verifica una casilla de verificación en particular, el mensaje correspondiente en cada una de las casillas de verificación se mostrará en el DOM a través del "intexto" propiedad:

Function CheckBox ()
get1 = documento.getElementById ("check1")
get2 = documento.getElementById ("check2")
get3 = documento.getElementById ("check3")
get4 = documento.GetElementById ("Msg")
if (get1.marcado == true)
Get4.inteText = "Lenguaje de Python seleccionado"

más si (get2.marcado == true)
Get4.inteText = "Lenguaje Java seleccionado"

más si (get3.marcado == true)
Get4.inntext = "JavaScript Language seleccionado"

Producción

Método 2: Mostrar texto Cuando la casilla de verificación se verifica en JavaScript usando jQuery

Este enfoque particular puede ser aplicable al incluir un "jQuery"Biblioteca y aplicando sus métodos.

Ejemplo 1: Mostrar texto cuando la casilla de verificación se verifica en JavaScript usando el método JQuery IS ()
Este método se puede aplicar para aplicar una condición en cualquiera de las casillas de verificación y notificar al usuario en consecuencia.

El primer paso será incluir el "jQuery" biblioteca:

Ahora, especifique las casillas de verificación que se refieren a tres opciones diferentes. Un "al hacer clic"El evento se adjunta a cada una de las casillas de verificación para invocar la función de verificación de la función () al verificar una casilla de verificación particular:

Google


Linuxhint


YouTube

Finalmente, defina una función llamada "CheckFunction ()". Aquí, aplique un "O (||)" condición. Esta función se ejecutará de tal manera que tan pronto como se verifique la casilla de verificación especificada, un cuadro de diálogo de alerta notificará al usuario al respecto. En el otro caso, el "demás"La condición se ejecutará:

función checkFunction ()
if ($ ('#check1') || ('#check2') || ('#check3').está chequeado'))
alerta ("Se verifica una casilla de verificación");

demás
alerta ("casilla de verificación no marcada");

Producción

Ejemplo 2: Mostrar texto Cuando la casilla de verificación se verifica en JavaScript usando los métodos jQuery Ready () y Click ()
El "listo()El método "especifica qué sucede cuando se produce un evento listo y se carga el modelo de objeto de documento. El método "Click ()", por otro lado, desencadena la función que se ejecuta cuando ocurra un evento de Click. Estos métodos se pueden implementar para hacer clic en la casilla de verificación accedida y mostrar el texto de la casilla de verificación y el valor correspondiente en su contra.

Sintaxis

$ (documento).listo (función)

En la sintaxis dada, "función"Se refiere a la función que se ejecutará después de cargar el DOM.

$ (selector).Haga clic (función)

Aquí, del mismo modo, el "función"Señala la función específica para ejecutar cuando ocurre el evento de clics.

Implementación
Primero, incluya la siguiente biblioteca jQuery:

Luego, dentro del ""Etiqueta, especifique las siguientes etiquetas y tipos de entrada para cada una de las casillas de verificación:

Lenguajes de programación:

Pitón

Javascript

Java

Después de eso, cree un botón con el especificado "clase" y "identificación":

Obtener el resultado

Ahora, en la implementación de jQuery, aplique el "listo() "Método de tal manera que cuando el DOM se carga, los pasos posteriores se vuelven funcionales. En el siguiente paso, aplique el "hacer clic()"Método y obtenga las casillas de verificación por sus nombres específicos. El "comprobado"La propiedad aquí asegurará que la casilla de verificación se verifique y devuelva el valor y el texto correspondientes de la casilla de verificación particular utilizando el"val ()" y "texto()"Métodos respectivamente:

$ (documento).Ready (function ()
$ ('#resultado').hacer clic (function ()
$ ('input [name = "resultado"]: verificado').Cada (function ()
Deje value = $ (esto).val ();
Let Text = $ ('Label [for = "$ value"]').texto();
consola.log ('El valor de la casilla de verificación es $ valor');
consola.log ('El texto de la casilla de verificación es $ text');
)
);
);

Producción

Este artículo demostró los métodos que se pueden utilizar para mostrar texto cuando se verifica una casilla de verificación en JavaScript.

Conclusión

Para mostrar texto Cuando se verifica una casilla de verificación en JavaScript, aplique el "comprobado"Propiedad junto con el"mostrar"Propiedad para mostrar el mensaje especificado en la casilla de verificación correspondiente que se verificará o con el"intexto"Propiedad para mostrar el texto correspondiente en el DOM tan pronto como se verifica la casilla de verificación. Además, puede utilizar el enfoque jQuery con el "es()"Método para aplicar un"O"Condición manejando cada una de la casilla de verificación o la"listo()" y "hacer clic()"Métodos para hacer clic en la casilla de verificación obtenida tan pronto como se carga el DOM. Este blog demostró los métodos para mostrar texto cuando se verifica una casilla de verificación en JavaScript.