Inputs Checkbox, Radio y Select: Manejo de Selecciones en Formularios
Domina los diferentes tipos de inputs de selección en formularios HTML: checkbox para opciones múltiples, radio para selección única, y select para listas desplegables.
TL;DR - Resumen rápido
- Los checkboxes permiten seleccionar múltiples opciones usando la propiedad checked
- Los radio buttons con el mismo name permiten solo una selección a la vez
- El elemento select usa selectedIndex o value para obtener la opción seleccionada
- Puedes acceder a checkboxes y radio buttons por nombre usando form.elements
- Los eventos change e input detectan cambios en estos elementos
Introducción a Inputs de Formulario
Los formularios web necesitan diferentes tipos de inputs según el tipo de datos que esperan del usuario. Los checkboxes, radio buttons y selects son tres de los elementos más comunes para capturar selecciones del usuario. Cada uno tiene características únicas que los hacen ideales para diferentes escenarios de UX.
Entender cómo trabajar con estos elementos en JavaScript es fundamental porque cada tipo de input tiene propiedades y comportamientos específicos. Los checkboxes usan la propiedad checked para indicar si están seleccionados, los radio buttons comparten el mismo atributo name para formar un grupo de selección única, y los selects usan selectedIndex o value para saber qué opción está elegida.
- <strong>Checkbox:</strong> Ideal para opciones independientes donde el usuario puede seleccionar cero, una o múltiples opciones
- <strong>Radio:</strong> Perfecto cuando el usuario debe elegir exactamente una opción de un grupo de alternativas mutuamente excluyentes
- <strong>Select:</strong> Útil cuando hay muchas opciones y quieres ahorrar espacio en pantalla con una lista desplegable
- Todos estos elementos disparan eventos change e input cuando el usuario modifica su estado
- Puedes acceder a estos elementos usando form.elements, querySelector o por ID
Es importante notar que aunque los eventos change e input están disponibles para estos elementos, change es generalmente preferido. El evento change se dispara cuando el usuario completa una acción (marca un checkbox, selecciona un radio, elige una opción), mientras que input puede dispararse múltiples veces durante la interacción, especialmente en selects cuando el usuario navega con el teclado.
Checkbox: Selección Múltiple
Los checkboxes son elementos de entrada que permiten al usuario seleccionar cero, una o múltiples opciones de un conjunto. Cada checkbox es independiente de los demás, lo que significa que no afectan el estado de otros checkboxes. En JavaScript, la propiedad más importante de un checkbox es checked, que es un booleano que indica si el checkbox está seleccionado.
Checkbox Básico
Para trabajar con un checkbox individual, primero accedes al elemento y luego lees o modificas su propiedad checked. Esta propiedad es true cuando el checkbox está marcado y false cuando no lo está. También puedes leer la propiedad value para obtener el valor asociado al checkbox, que es lo que se envía cuando el formulario se envía.
Este código muestra cómo acceder a un checkbox y leer su estado. La propiedad checked es un booleano que indica si el checkbox está seleccionado. La propiedad value contiene el valor que se enviará con el formulario. Es importante notar que si un checkbox no está marcado, su valor no se incluye en los datos del formulario al enviarlo.
Checkbox no marcado no se envía
Cuando envías un formulario, los checkboxes que no están marcados NO se incluyen en los datos enviados. Esto significa que en el servidor, recibirás solo los checkboxes que están marcados. Si necesitas saber qué checkboxes existen, debes tener esa información por adelantado o enviarla de otra forma.
Múltiples Checkboxes con el Mismo Nombre
Cuando tienes múltiples checkboxes con el mismo atributo name, form.elements[name] devuelve una colección de todos esos checkboxes en lugar de un solo elemento. Esto es útil cuando quieres permitir al usuario seleccionar múltiples opciones de un grupo, como preferencias o categorías. Puedes iterar sobre esta colección para obtener todos los checkboxes que están marcados.
Este ejemplo muestra cómo trabajar con múltiples checkboxes que comparten el mismo nombre. Cuando accedes a form.elements['intereses'], obtienes una colección de todos los checkboxes con ese nombre. Luego iteramos sobre la colección y filtramos solo los que están marcados para obtener un array con los valores seleccionados. Este patrón es muy común para capturar preferencias del usuario y es más accesible que un select múltiple.
Eventos en Checkboxes
Los checkboxes disparan eventos change e input cuando el usuario los marca o desmarca. El evento change es más común porque se dispara cuando el usuario completa la acción de marcar o desmarcar. El evento input se dispara inmediatamente con cada cambio, lo que puede ser útil para validación en tiempo real, pero también puede causar problemas de rendimiento si hay lógica compleja asociada.
Este código muestra cómo escuchar eventos en un checkbox. El event listener para el evento change detecta cuando el usuario marca o desmarca el checkbox y muestra el nuevo estado. También se muestra cómo acceder al elemento que disparó el evento usando event.target, lo que es útil cuando tienes múltiples checkboxes con el mismo event listener.
Estado Indeterminado
Los checkboxes tienen un tercer estado además de marcado y no marcado: el estado indeterminado. Este estado se usa comúnmente en interfaces con checkboxes anidados, donde un checkbox padre representa un grupo de checkboxes hijos. El estado indeterminado indica que algunos hijos están marcados y otros no. Es importante notar que el estado indeterminado es solo visual y no afecta el valor del checkbox al enviar el formulario.
Este ejemplo muestra cómo usar el estado indeterminado. La propiedad indeterminate es true cuando algunos checkboxes hijos están marcados y otros no. Cuando el usuario hace clic en el checkbox padre, todos los hijos se marcan o desmarcan según el estado actual. Este patrón es muy común en interfaces de configuración y en tablas con selección múltiple.
indeterminate no es un valor de formulario
El estado indeterminado es solo visual. No se envía con el formulario y no afecta la propiedad checked. Si envías un formulario con un checkbox en estado indeterminado, se enviará como checked si checked es true, o no se enviará si checked es false. El estado indeterminado debe manejarse completamente en JavaScript.
Radio Buttons: Selección Única
Los radio buttons son elementos de entrada que permiten al usuario seleccionar exactamente una opción de un grupo. A diferencia de los checkboxes, los radio buttons con el mismo atributo name forman un grupo donde solo uno puede estar seleccionado a la vez. Cuando el usuario selecciona un radio button, todos los demás del mismo grupo se desmarcan automáticamente.
Radio Buttons Básicos
Para crear un grupo de radio buttons, todos deben tener el mismo atributo name. Cada radio button debe tener un valor único usando el atributo value. En JavaScript, puedes acceder al radio button seleccionado buscando cuál tiene la propiedad checked igual a true. Alternativamente, puedes usar form.elements[name].value para obtener directamente el valor del radio button seleccionado.
Este código muestra dos formas de obtener el radio button seleccionado. La primera forma itera sobre todos los radio buttons del grupo y busca cuál tiene checked igual a true. La segunda forma es más concisa: form.elements['genero'].value devuelve directamente el valor del radio button seleccionado. Esta segunda forma es preferible porque es más simple y eficiente.
Radio buttons sin selección inicial
Si ningún radio button tiene el atributo checked inicialmente, form.elements[name].value devolverá undefined. Es una buena práctica establecer un radio button como seleccionado por defecto usando el atributo checked en el HTML, o validar que haya una selección antes de enviar el formulario.
Eventos en Radio Buttons
Los radio buttons disparan eventos change cuando el usuario selecciona una opción diferente. El evento se dispara en el radio button que fue seleccionado, no en el que fue deseleccionado. Esto significa que puedes agregar un event listener a cada radio button individualmente, o usar delegación de eventos para escuchar cambios en todo el grupo.
Este ejemplo muestra cómo escuchar cambios en radio buttons usando delegación de eventos. En lugar de agregar un event listener a cada radio button, agregamos uno al formulario y verificamos si el elemento que disparó el evento es un radio button. La delegación de eventos es especialmente útil porque reduce el número de event listeners en memoria, mejora el rendimiento, y simplifica el código cuando tienes muchos radio buttons que comparten el mismo comportamiento.
Validación de Radio Buttons
Los radio buttons se pueden validar usando el atributo required, que asegura que el usuario seleccione al menos una opción del grupo. En JavaScript, puedes verificar si hay una selección usando form.elements[name].value. Si el valor es undefined o vacío, significa que ningún radio button está seleccionado.
Este ejemplo muestra cómo validar que el usuario haya seleccionado un radio button antes de enviar el formulario. Primero verificamos si el valor es undefined, lo que indica que no hay selección. Si no hay selección, prevenimos el envío del formulario y mostramos un mensaje de error. Este patrón es esencial para formularios donde la selección es obligatoria.
Select: Listas Desplegables
El elemento select crea una lista desplegable de opciones donde el usuario puede seleccionar una o múltiples opciones. Los selects son ideales cuando tienes muchas opciones y quieres ahorrar espacio en pantalla. Cada opción dentro del select es un elemento option, que tiene un valor y un texto visible para el usuario.
Elegir entre checkbox, radio o select depende del contexto y número de opciones:
- <strong>Select simple:</strong> Para 7+ opciones con selección única (países, estados, categorías)
- <strong>Radio buttons:</strong> Para 2-6 opciones con selección única y alta visibilidad
- <strong>Checkboxes:</strong> Para cualquier cantidad de opciones con selección múltiple
- <strong>Select múltiple:</strong> Evítalo si es posible, prefiere checkboxes para mejor UX móvil
- Para más de 50 opciones considera un campo de búsqueda con autocompletado
Select Básico
Para trabajar con un select, primero accedes al elemento y luego puedes obtener la opción seleccionada de varias formas. La propiedad selectedIndex devuelve el índice de la opción seleccionada, y la propiedad value devuelve el valor de esa opción. También puedes acceder a las opciones individuales usando la colección options, que contiene todos los elementos option del select.
Este código muestra diferentes formas de acceder a la opción seleccionada en un select. selectedIndex devuelve el índice de la opción seleccionada, que puedes usar para acceder directamente a esa opción en la colección options. La propiedad value devuelve directamente el valor de la opción seleccionada, que es lo que se envía con el formulario.
selectedIndex = -1 cuando no hay selección
Si el select no tiene ninguna opción seleccionada, selectedIndex será -1. Esto puede ocurrir si el select no tiene el atributo selected en ninguna opción, o si el usuario no ha interactuado con el select. Siempre verifica que selectedIndex sea mayor o igual a 0 antes de acceder a options[selectedIndex].
Select con Selección Múltiple
Cuando agregas el atributo multiple al select, el usuario puede seleccionar múltiples opciones. En este caso, selectedIndex devuelve solo el índice de la primera opción seleccionada, por lo que no es útil para obtener todas las selecciones. En su lugar, debes iterar sobre la colección options y verificar cuáles tienen la propiedad selected igual a true.
Este ejemplo muestra cómo trabajar con un select de selección múltiple. Iteramos sobre todas las opciones y filtramos solo las que tienen selected igual a true. Luego extraemos los valores de esas opciones en un array. Este patrón es necesario porque selectedIndex solo devuelve el índice de la primera opción seleccionada, no todas.
UX de selección múltiple
Los selects de selección múltiple pueden ser difíciles de usar en dispositivos móviles porque la UX varía entre navegadores. Para mejor usabilidad, considera usar checkboxes en lugar de un select multiple cuando tengas menos de 10 opciones. Los checkboxes son más accesibles y proporcionan una UX más consistente en todos los dispositivos.
Eventos en Select
Los selects disparan eventos change cuando el usuario selecciona una opción diferente. El evento change es más común que input porque input se dispara cada vez que el usuario navega por las opciones con el teclado, lo que puede causar comportamientos no deseados. El evento change se dispara solo cuando el usuario confirma su selección.
Este código muestra cómo escuchar cambios en un select. El event listener para el evento change detecta cuando el usuario selecciona una opción diferente y muestra el nuevo valor. También se muestra cómo acceder a la opción seleccionada usando selectedIndex y options, lo que te permite obtener tanto el valor como el texto visible de la opción.
Optgroups: Agrupar Opciones
Los elementos optgroup permiten agrupar opciones relacionadas dentro de un select. Esto mejora la usabilidad cuando tienes muchas opciones, ya que ayuda al usuario a encontrar la opción que busca más rápidamente. En JavaScript, los optgroups son parte de la colección options, pero no tienen valor y no pueden ser seleccionados por el usuario.
Este ejemplo muestra cómo trabajar con selects que usan optgroups. Iteramos sobre todas las opciones y filtramos solo las que no son optgroups (verificando que no tengan la propiedad label sin value). Esto es útil cuando necesitas procesar todas las opciones seleccionables del select, ignorando los grupos. Los optgroups no solo mejoran la UX visual, sino que también mejoran la accesibilidad: los lectores de pantalla anuncian los grupos de opciones, ayudando a usuarios con discapacidades visuales a navegar más fácilmente.
Resumen: Inputs Checkbox, Radio y Select
Conceptos principales:
- •Los checkboxes usan la propiedad checked para indicar selección
- •Los radio buttons con el mismo name forman un grupo de selección única
- •Los selects usan selectedIndex o value para obtener la opción seleccionada
- •Los checkboxes no marcados no se envían con el formulario
- •Los selects múltiples requieren iterar sobre options para obtener selecciones
Mejores prácticas:
- •Usa checkboxes para opciones independientes donde se permite selección múltiple
- •Establece un radio button seleccionado por defecto en grupos obligatorios
- •Prefiere checkboxes sobre selects múltiples para mejor usabilidad móvil
- •Usa optgroups para agrupar opciones relacionadas en selects grandes
- •Escucha el evento change en lugar de input para mejor rendimiento