Ir al contenido

Cambiar el valor de un radio group dinámicamente

Agrupando elementos INPUT de tipo radio podemos crear un grupo de opciones, en las cuales el usuario solo pueda elegir una de ellas. Esto se consigue asignando un único nombre (atributo name) a todos los elementos input radio.

Así, podríamos construir un formulario para preguntar por el sexo del usuario:

<form id="myform">
<input id="sexo_m" name="sexo" type="radio" value="masculino">
<label for="sexo_m">Masculino</label>
<input id="sexo_f" name="sexo" type="radio" value="femenino">
<label for="sexo_f">Femenino</label>
</form>

Cambiar el valor dinámicamente con JavaScript

Sección titulada «Cambiar el valor dinámicamente con JavaScript»

Si tenemos valores sobre la información del usuario, por ejemplo si está modificando su información anterior, podemos tener la necesidad de cambiar el valor dinámicamente. En este caso, y de no poder crear el formulario de forma dinámica, podemos utilizar JavaScript para cambiar el valor de forma dinámica.

Para cambiar el valor utilizaremos, en primer lugar, la función .getElementById() para acceder al elemento INPUT del formulario. Es por ello que es muy importante el haberle dado un valor al atributo ID.

Cuando accedemos al elemento INPUT vemos que el atributo checked es el que nos informa si el elemento está chequeado o no:

document.getElementById('sexo_m').checked = true;

Los valores que puede tomar el atributo checked son true y false. Con la línea de código anterior lo que estamos haciendo es marcar el campo sexo_m como activo.

Foto de Víctor Cuervo

Víctor Cuervo

Programador, Arquitecto IT, álter ego de Línea de Código, amante de las tecnologías, generador de conocimiento y facilitador del aprendizaje.

Descarga el código de Cambiar el valor de un radio group dinámicamente

Uso de código fuente Javascript para cambiar el valor de un radio group dinámicamente.

Descargar código