feed twitter facebook LinkedIn facebook

JavaScript » Cambiar el valor de un radio group dinámicamente

Septiembre 19, 2009 por Víctor Cuervo . 4970 visitas 5 Comentarios Imprimir Imprimir

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.

Visualizar el Codigo
Visualiza el artículo
Descargar el Codigo
Descargar el código
Error en el Codigo
Error en el código
Foro sobre JavaScript
Foro sobre JavaScript
tags: , , , , ,

Artículos relacionados:

5 comentarios »

Redifusión RSS de los comentarios de la entrada. TrackBack URI

  1. Paulo Arieu
    Septiembre 20, 2009 #

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

  2. Henry
    Octubre 7, 2009 #

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

  3. fer
    Diciembre 27, 2009 #

    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.

  4. lineadecodigo
    Diciembre 27, 2009 #

    @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.

  5. Autofoco a un campo con HTML5 | Diseño web económico
    Febrero 5, 2012 #

    [...] Cambiar el valor de un radio group dinámicamente [...]

Deje un comentario

XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

*