Cambiar el valor de un radio group dinámicamente

19/Sep/2009 JavaScript , , , 5 Comentarios

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:

  1.  
  2. <form id="myform">
  3. <input type="radio" name="sexo" id="sexo_m"/ value="masculino">
  4. <label for="sexo_m">Masculino</label><br/>
  5. <input type="radio" name="sexo" id="sexo_f"/ value="femenino">
  6. <label for="sexo_f">Femenino</label><br/>
  7. </form>
  8.  

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.

  1.  
  2. document.getElementById('sexo_m').checked = true;
  3.  

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.

Vídeos sobre JavaScript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

5 comentarios en “Cambiar el valor de un radio group dinámicamente”

Víctor Cuervo

lineadecodigo

@fer,

El código es Javascript. Es por ello que puedes ponerlo dentro de <script></script> de la página web que estás generando en PHP o bien, como tú dices, incluirlo en un fichero .js que luego incluyas en la página.

En tu caso, si lo haces en un formulario, ponlo directamente en la página.

Espero que te sea de ayuda.

Víctor Cuervo

fer

tengo un duda

soy nuevo en esto!

document.getElementById(‘sexo_m’).checked = true;

se puede usar directamente con el php o se tiene que hacer una funcion en el archivo .js

es que tengo todo un .js que copie de AJAX y justo estoy con php de registracion, y resulta que tengo que verificar si es masculino o femenino.

Víctor Cuervo

Henry

excelente, funciona muy bien, no imaginaba la función getElementById

Víctor Cuervo

Paulo Arieu

ahhh,usa el id y no el name.
Yo usaba option[n],
Muy interesante.
Gracias.Lo probare.
salu2

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*