EL IDIOMA UNIVERSAL INTERACTIVO
Para que no te encasilles

 

 

Las casillas de verificación y los botones de radio trabajan en el contexto de un grupo, mostrándose como varias opciones posibles frente a una consulta. Pero tienen un diferencia clave. Las casillas se usan en preguntas que tienen más de una alternativa como respuesta, mientras que los botones de radio permiten optar por una única opción.

Para crear casillas hay que poner "Checkbox" en el atributo TYPE de la etiqueta <INPUT> y para los botones, la palabra "Radio".

Ambos objetos tienen los atributos NAME y VALUE pero, según el caso, estas

 

Comparte tus dudas y consejos con otros usuarios de Javascript

TEMAS RELACIONADOS

Curso completo de HTML

Un lugar para tu sitio personal

Indice del curso de JavaScript

 

características se usan de maneras distintas. El siguiente código crea tres casillas referidas a gustos musicales:

<FORM>

¿Qué tipo de música te gusta?

<INPUT TYPE="checkbox" NAME="rock" VALUE="si">Rock

<br> <INPUT TYPE="checkbox" NAME="dance" VALUE="si">Dance

<br> <INPUT TYPE="checkbox" NAME="pop" VALUE="si">Pop

<FORM>

En tu navegador, lo verás así:

¿Qué clase de música te gusta?
Rock
Dance
Pop

Los atributos NAME de las casillas se corresponden a cada elección, mientras que los VALUE son iguales. Así se facilita la lectura de los resultados del formulario al recibirlos, en los que podrás ver directamente "rock=si" y "pop=si", por ejemplo. Para lograr esa facilidad con los botones de radio, procede a la inversa. Observa el siguiente código:

<FORM>

¿Qué edad tienes?

<INPUT TYPE="radio" NAME="edad" VALUE="10a20">Entre 10 y 20

<br> <INPUT TYPE="radio" NAME="edad" VALUE="21a40">De 21 a 40

<br> <INPUT TYPE="radio" NAME="edad" VALUE="41a99">De 41 a 99

<FORM>

Y se ve así en tu browser:

¿Qué edad tienes?
Entre 10 y 20
De 21 a 40
De 41 a 99

Aquí, NAME se repite y es VALUE el que cambia para establecer la edad. Los resultados del formulario se verán, por ejemplo, así: "edad=21a40". Fácil, ¿no?

Fíjate ahora cómo relacionar una función JavaScript con estos elementos.

¿Cuál es la ciudad capital de Brasil?
Rio de Janeiro
Brasilia
San Pablo

¿Acertaste? Bien, ahora revisa el código para aprender a hacerlo con tus propios ejemplos.

clic para ampliar

Lo primero es crear los diferentes botones de radio, dándoles el mismo NAME ("ciudad"), pero diferentes VALUE para diferenciarlos. Luego, los eventos "onClick" de cada uno evocan a las funciones JavaScript creadas. En caso de hacer clic sobre "Brasilia", se activa la función "correcto()", mientras que si se elije alguna de las otras dos ciudades, se pone en acción "incorrecto()".

¡Hasta la próxima!

Guía de lectura