Articles

JavaScript Checkbox
Posted by admin

Resumen: En este tutorial, aprenderá a usar JavaScript para verificar si una casilla de verificación está marcada, para obtener valores de las casillas de verificación seleccionadas y seleccionar / deseleccionar todas las casillas de verificación.

comprobar si una casilla de verificación está marcada

para obtener el estado de una casilla de verificación, ya esté marcada o no, siga estos pasos:

  • Primero, seleccione la casilla de verificación utilizando los métodos de DOM seleccionados, como getElementById()o querySelector().
  • a continuación, acceda a la propiedad checked del elemento checkbox., Si su propiedad checked es true, entonces la casilla de verificación está marcada; de lo contrario, no lo está.,el buey está activada, utilice el código siguiente:

    Code language: JavaScript (javascript)

    Además, puede utilizar la etiqueta querySelector() para comprobar si el :checked selector de no retorno null, como este:

    Code language: JavaScript (javascript)

    Si una casilla de verificación no tiene la etiqueta value atributo, su valor por defecto es 'on':

    Code language: HTML, XML (xml)

    Si usted consigue el value atributo de una casilla de verificación, usted siempre obtener el 'on' string si la casilla de verificación está activada o no., Por ejemplo:

    Code language: JavaScript (javascript)

    Consulte el siguiente ejemplo:

    Obtener valores de varias casillas de verificación

    Asumiendo que usted tiene tres casillas de verificación y desea obtener los valores de todas las casillas de verificación seleccionadas:

    Code language: HTML, XML (xml)

    Para lograr esto, es necesario añadir dos más atributos HTML a cada casilla de verificación: name y value ., Las tres casillas de verificación deben tener el mismo nombre pero valores distintos, por ejemplo:

    para seleccionar las casillas de verificación seleccionadas, use el método querySelector():

    Code language: JavaScript (javascript)

    y reúna el valor de cada casilla de verificación:

    Code language: JavaScript (javascript)

    ponlo todo junto:

    el checkboxes.js archivo:

marcar/desmarcar todas las casillas de verificación

a veces, es posible que desee marcar y desmarcar todas las casillas de verificación en un formulario., Vea el siguiente ejemplo:

Cuando usted haga clic en el botón con el id btn, todas las casillas de verificación se comprueba si no lo son, y sin comprobar si ya están comprobados.

primero, desarrolle una función check() que marque o desmarque todas las casillas de verificación basadas en un argumento de entrada:

cuando haga clic en el botón, puede llamar a la función check() para seleccionar todas las casillas de verificación. La próxima vez, cuando haga clic en el botón, debe desmarcar todas las casillas de verificación.,

para hacer este cambio, debe reasignar el controlador de eventos de clic cada vez que se inicie el evento de clic.

El siguiente seleccione el botón y haga clic en adjuntar un detector de eventos:

Code language: JavaScript (javascript)

El checkAll() función es como sigue:

Code language: JavaScript (javascript)

El uncheckAll() función es:

Cómo funciona:

Si usted pulsa el botón, el uncheck() función es invocada para seleccionar todas las casillas. Luego, reasigna la función uncheckAll() al controlador de eventos onclick.,

la próxima vez, si hace clic en el botón, se invoca la función uncheckAll() para desmarcar todas las casillas de verificación y reasignar la función checkAll() al controlador de eventos onclick.

Resumen

  • Hacer uso de checkbox.checked propiedad o :check selector para determinar si una casilla de verificación está activada.
  • consulta el atributo value para obtener el valor de una casilla de verificación.
  • Fue este tutorial útil ?
  • YesNo

Leave A Comment