usar casillas de verificación es una buena opción cuando desea dar a sus visitantes la opción de elegir varios elementos de un grupo de opciones. En ese sentido, la casilla de verificación funciona frente a un botón de opción, que solo le permite seleccionar un elemento de un grupo de opciones., En su forma más simple, una casilla de verificación es simplemente un elemento de entrada con la propiedad type establecida en casilla de verificación, como esta:
<input type="checkbox">Sin embargo, como con todos los elementos de entrada, necesita definir un nombre para que sea utilizable – sin un nombre, el elemento no será identificable al enviar el formulario de nuevo a un servidor para su procesamiento. También desea establecer un valor: este será el valor enviado al servidor si se ha marcado la casilla de verificación., Este es un ejemplo:
<input type="checkbox" name="nameOfChoice" value="1">con este ejemplo, si la casilla de verificación se ha marcado y el formulario se envía a un servidor, el servidor podrá leer el elemento de formulario «nameOfChoice» y su valor será 1.
¿marcado o no marcado?
observe cómo todas las casillas de verificación hasta ahora no se han marcado desde el principio: el usuario tendría que interactuar con la casilla de verificación para cambiar su estado de sin marcar a marcado., Esto podría ser lo que desea, pero a veces, desea que la casilla de verificación esté marcada por defecto, ya sea para sugerir una opción al usuario o porque está mostrando una casilla de verificación con un valor que corresponde a una configuración existente, por ejemplo, de una base de datos., Afortunadamente, esto es muy simple: simplemente agregue el atributo checked a la casilla de verificación:
<input type="checkbox" name="nameOfChoice" value="1" checked>en los viejos tiempos de XHTML, donde cada atributo siempre debería tener un valor, incluso los atributos booleanos, se vería así:
<input type="checkbox" name="nameOfChoice" value="1" checked="checked" />de cualquier manera debería funcionar en todos los navegadores modernos, pero la primera forma es más corta y más «HTML5 – like».
opciones múltiples
hasta ahora, todas nuestras casillas de verificación han sido simples interruptores, por ejemplo, para definir si una opción está activada o desactivada., Las casillas de verificación son excelentes para eso, pero como se mencionó, también se pueden usar para permitir al usuario una selección de opciones posibles. Permítanme mostrarles un ejemplo claro donde esto tiene sentido:
observe cómo Ahora tenemos varias casillas de verificación, pero todas comparten el mismo nombre («favorite_pet») pero valores diferentes (por ejemplo, «perros»). Cuando este formulario se envía de nuevo al servidor, todas estas casillas de verificación estarán representadas por un solo nombre, pero el valor será una matriz de 0-3 elementos., Si hubiera utilizado botones de opción en lugar de casillas de verificación, al usuario solo se le permitiría elegir un solo animal favorito, pero con casillas de verificación, puede seleccionar ninguno de ellos, todos ellos o algunos de ellos.
etiquetas para Casillas de verificación
si probó el ejemplo anterior, notará que podemos poner texto junto a una casilla de verificación, pero siguen siendo dos cosas separadas: no puede hacer clic en el texto para activar la casilla de verificación. Esto puede ser realmente molesto para el usuario, pero afortunadamente para nosotros, es fácil de resolver: ¡solo use el elemento label!, Aquí hay un ejemplo básico para mostrarte la diferencia:
dos casillas de verificación: una sin etiqueta y otra con. Pueden parecer casi idénticos, pero el que tiene la etiqueta se puede activar haciendo clic tanto en la casilla de verificación real como en la etiqueta adjunta. Esto es bueno si estás sentado en una PC de escritorio con un ratón, pero aún mejor cuando estás usando un dispositivo táctil como un teléfono inteligente, donde las casillas de verificación pequeñas pueden ser difíciles de golpear con el dedo.,
la etiqueta es muy simple: utiliza el atributo for para unirse a un elemento de formulario con un atributo id coincidente (observe cómo tengo «perros» en ambos lugares).
trabajando dinámicamente con una casilla de verificación
Al igual que cualquier otro elemento DOM, puede manipular una casilla de verificación usando JavaScript. En ese sentido, podría ser interesante verificar si una casilla de verificación está marcada o no y quizás agregar alguna lógica para controlar cuántas opciones puede seleccionar un usuario., Para mostrarte cómo se puede hacer esto, he extendido un ejemplo anterior (el selector «mascota favorita») para incluir algo de magia de JavaScript:
me permite ejecutar rápidamente lo que hace este código. Tenemos el mismo formulario que antes, pero hemos agregado un controlador de eventos a cada una de las casillas de verificación, lo que hace que llamen a una función JavaScript (ValidatePetSelection) cuando el usuario hace clic en ellas. En esta función, obtenemos un control de todas las casillas de verificación relevantes usando la función getElementsByName y luego las recorremos para ver si están marcadas o no – para cada elemento marcado, agregamos a un número., Este número se comprueba y si supera dos, entonces alertamos al usuario sobre el problema (solo se pueden seleccionar dos mascotas) y luego devolvemos false. Devolver false evitará que se marque la casilla de verificación.
esto fue solo un simple ejemplo de cómo trabajar con casillas de verificación usando JavaScript. Puede hacer mucho más, especialmente si utiliza un marco de JavaScript como jQuery, que hará que sea mucho más fácil seleccionar y manipular elementos DOM.,
resumen
Las casillas de verificación le permiten configurar opciones seleccionables para sus usuarios, ya sea para activar o desactivar una sola configuración, o para permitir múltiples opciones, como en el ejemplo de mascota favorita. Debe usar etiquetas para unir su casilla de verificación y el texto descriptivo, para permitir que el Usuario haga clic en un área más grande al manipular la casilla de verificación; esto también es bueno para ayudar a tecnologías como lectores de pantalla para personas con discapacidad visual.
