Botones de radio en Javascript (2)

Primero podemos fijarnos en el formulario y en la lista de botones de radio. Todos se llaman "colorin", así que están asociados en un mismo grupo. Además vemos que el atributo value de cada botón cambia. También vemos un botón abajo del todo.

Con esta estructura de formulario tendremos un array de elements de 9 elementos, los 8 botones de radio y el botón de abajo.

Además tendremos un array de botones de radio que se llamará colorín y depende del formulario, accesible de esta manera.

document.form.colorin

Este array tiene en cada posición uno de los botones de radio. Así en la posición 0 está el botón del color blanco, en la posición 1 el del color rojo... Para acceder a esos botones de radio lo hacemos con su índice.

document.fcolores.colorin[0]

Si queremos acceder por ejemplo a la propiedad value del último botón de radio escribimos lo siguiente.

document.fcolores.colorin[7].value

La propiedad length del array de radios nos indica el número de botones de radio que forman parte del grupo.

document.fcolores.colorin.length

En este caso la propiedad length valdrá 8.

Con estas notas podremos entender más o menos bien la función que se encarga de encontrar el radio button seleccionado y cambiar el color de fondo de la página.

Se define una variable en la que introduciremos el índice del radio button que tenemos seleccionado. Para ello vamos recorriendo el array de botones de radio hasta que encontramos el que tiene su propiedad checked a true. En ese momento salimos del bucle, con lo que la variable i almacena el índice del botón de radio seleccionado. En la última línea cambiamos el color de fondo a lo que hay en el atributo value del radio button seleccionado.

Usuarios que han visto este tema también han visto...

- Javascript para recomendar página
- Contadores de Fecha
- Enviar mediante POST y GET usando AJAX
- Efectos Rollover
- Abrir Popup

- Versión imprimible de este documento

- Enviar por e-mail este documento