Cómo obtener el valor de la casilla de verificación en JavaScript

Cómo obtener el valor de la casilla de verificación en JavaScript

En JavaScript, obtener un valor de casilla de verificación trae facilidad para el usuario al confirmar las opciones seleccionadas. Además, en el caso de enviar un formulario importante, obtener un valor de casilla de verificación ayuda a ingresar información precisa. Además, seleccionar múltiples opciones para una respuesta en un cuestionario o un cuestionario y obtener el valor de la casilla de verificación ayuda a encontrar la solución correcta.

Este artículo lo guiará para obtener/obtener valores de casilla de verificación en JavaScript.

Cómo obtener/buscar el valor de la casilla de verificación en JavaScript?

Para obtener el valor de casilla de verificación en JavaScript, puede usar:

    • "documento.QuerySelectorAll ()" método
    • "documento.GetElementByid" método

Ahora pasaremos por cada uno de los métodos uno por uno!

Método 1: Obtener valor de casilla de verificación en JavaScript usando el documento.método QuerySelectorAll ()

El "documento.QuerySelectorAll ()El método "devuelve todos los elementos que coinciden con un selector CSS. También puede utilizar este método para seleccionar los valores de casilla de verificación especificados.

Sintaxis

documento.QuerySelectorAll (selectores CSS)


Aquí, "Selectores CSS"Consulte el nombre de las casillas de verificación definido en el archivo HTML.

Realice el siguiente ejemplo para la demostración:

Ejemplo

En el primer paso, asignaremos un "etiqueta paraAtributo que especifica una etiqueta para un elemento HTML de entrada de un formulario. Después de eso, agregaremos el tipo de entrada "caja"Para usar la casilla de verificación como entrada. Ahora, asignaremos "nombre","valor", y "identificación"Para cada casilla de verificación. Por último, también incluiremos un botón para obtener el valor de la casilla de verificación. Estos procesos se repetirán para cada uno de los tres casillas de verificación:

Seleccione su idioma favorito








En el siguiente paso, buscaremos el botón "identificación" usando "documento.QuerySelector ()Método "y agregar el"hacer clic"Evento al botón. A continuación, incluya el "documento.QuerySelectorAll ()Método "dentro del evento Click para seleccionar los valores de las casillas de verificación especificadas. Finalmente, aplique el "empujar()"Método para mostrar el valor de cada casilla de verificación seleccionada utilizando el"documento.escribir()" método:


La salida de la implementación anterior dará como resultado:

Método 2: Obtenga el valor de casilla de verificación en JavaScript usando el documento.método getElementById ()

El "documento.getElementById ()El método "devuelve un elemento con un valor o ID especificado. También se puede usar para obtener la casilla de verificación "identificación"Y devuelve el valor de cada casilla de verificación seleccionada.

Sintaxis

documento.getElementById (ElementId)


Aquí el "elemento" se refiere al valor de identificación de un elemento cuyo valor seleccionado se va a obtener.

Pasemos por el siguiente ejemplo de demostración.

Ejemplo

En primer lugar, especificaremos el tipo de entrada a "caja"Y asigne el"identificación","clase", y "valor"A cada casilla de verificación como se discute en el método anterior. Contendremos estas funcionalidades en una etiqueta llamada Tabla Data "". Del mismo modo, incluiremos un botón con un "al hacer clic"Evento que accederá a la función"getCheckboxValue ()":

Seleccione su idioma favorito


Pitón:
Java:
JavaScript:



Ahora, declararemos una función llamada "getCheckboxValue ()"Para obtener la ID de cada casilla de verificación utilizando el"documento.getElementById ()" método. A continuación, crearemos una variable "resultado”, En el que se almacenará el valor resultante de la casilla de verificación seleccionada.

Por último, agregaremos diferentes condiciones para cada casilla de verificación usando "si/else" declaraciones. Estas declaraciones funcionarán de tal manera que si se selecciona o se marca una casilla de verificación específica como se verifica, el documento.El método getElementById () accederá a su ID, y se mostrará el valor correspondiente contra esa ID en particular. Finalmente, muestre el contenido del valor de la casilla de verificación de la tienda:


La salida de la implementación anterior dará como resultado:


Hemos proporcionado todos los métodos más simples para obtener valores de casilla de verificación en JavaScript.

Conclusión

Para obtener el valor de la casilla de verificación en JavaScript, puede usar el "documento.QuerySelectorAll ()Método "para seleccionar las casillas de verificación especificadas o el"documento.GetElementByidMétodo "para obtener el"identificación"Contra cada una de las casillas de verificación seleccionadas y mostrar su valor correspondiente. Este artículo ha explicado los métodos para obtener valores de casilla de verificación en JavaScript.