Tengo un sitio web que actualmente tiene muchos botones de opción. Recientemente, decidí que preferiría un comportamiento que sea una combinación de radio y casilla de verificación. Entonces, si hace clic en una casilla marcada, se desmarca (como una casilla de verificación), pero si hace clic en una casilla sin marcar, la casilla marcada se marca y todas las demás casillas se desmarcan (como un botón de opción).
Se ha hecho y respondido una pregunta extremadamente similar aquí ¿Cómo marcar/desmarcar el botón de opción al hacer clic? sin embargo, la respuesta fue escrita en jquery y estoy tratando de mantener todo en javascript.
Podría simplemente jugar hasta que encuentre algo que funcione, pero esa técnica generalmente me da cosas que solo funcionan en un navegador, así que espero una respuesta un poco más "estándar de la industria" que funcione para todos los navegadores pasados y futuros (cuanto más se pueda).
La solución ideal me permitiría mantener el marcado como botones de opción, porque estoy trabajando con código que escribí cuando aún estaba aprendiendo, y mi CSS es un desastre.
Pero una solución no ideal sigue siendo mejor que ninguna solución.
Los botones ya están usando una función onclick
para otra cosa, por lo que probablemente sea mejor aprovechar eso, ¿o no?
Simplemente maneje el evento onclick
para desmarcar el valor, generalmente estableciéndolo como null
o undefined
. Incluso si hay una lógica actual en el controlador de clics, en esa lógica también probablemente querrá revertir lo que esté sucediendo en el clic.
El problema con la anulación de la selección de un grupo de radio es que debe borrar el valor de selección, dependiendo de su marco, es posible que tenga otra lógica que dependa de que se seleccione 1 valor.
Por lo general, resuelvo este enigma de la interfaz de usuario agregando deliberadamente un botón de opción que se asigna al estado indefinido , luego puede usar la validación (si la necesita) para asegurarse de que al final del formulario el usuario seleccione un valor. Esta opción adicional hace que la gestión del estado sea más sencilla de codificar, pero también le da al usuario un control explícito. Una activación mágica de javascript (quizás después de un retraso inesperado) después de que accidentalmente hizo doble clic en un botón de radio o volvió a seleccionar el mismo valor no es la interacción habitual y probablemente hará que una cantidad de usuarios envíen sin una selección, a pesar de que intención de seleccionar una opción.
Debemos tener cuidado al intentar manipular los controles para realizar comportamientos no estándar. Hay una razón por la que tenemos estándares y es difícil hacer lo que estás tratando de hacer. Encuentre una solución que utilice los controles de la forma en que fueron diseñados... Consulte el principio de "menos asombro" para mantener contentos a sus usuarios.