Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/04/2012, 22:01
Ojopex2
 
Fecha de Ingreso: abril-2010
Mensajes: 112
Antigüedad: 14 años, 10 meses
Puntos: 2
radio button muestra div, cambiar div al cambiar radio

Hola amigos, soy principiante en javascript y he estado navegando en busca de ayuda y me he encontrado con esta respuesta que me ha servido mucho pero quedo inconcluso

http://www.forosdelweb.com/f13/como-...8/#post2776735
(Preferí hacer un hilo nuevo ya que el otro era antiguo)
el código

Código Javascript:
Ver original
  1. function showMe (it, box) {
  2. var vis = (box.checked) ? "block" : "none";
  3. document.getElementById(it).style.display = vis;
  4. }

Código HTML:
Ver original
  1. <input id="Otro" name="Otro" type="radio" value="t1" onclick="showMe('oculto', this)" > Opcion 1
  2. <input id="Otro2" name="Otro" type="radio" value="t2" onclick="showMe('oculto2', this)" > Opcion 2
  3. <input id="Otro3" name="Otro" type="radio" value="t3" onclick="showMe('oculto3', this)" > Opcion 3
  4. <div id="oculto" style="display:none" >
  5. <input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
  6. <br />+++++++++++++++++++++++
  7. </div>
  8. <div id="oculto2" style="display:none" >
  9. <input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
  10. <br />+++++++++++++++++++++++
  11. </div>
  12. <div id="oculto3" style="display:none" >
  13. <input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value1" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value2" ><input id="otra_vivienda" name="otra_vivienda" type="text" size="20" maxlength="50" value="Value3" >
  14. <br />+++++++++++++++++++++++
  15. </div>

Hace lo que promete, al elegir una opcion en el radio, despliega el div oculto, y lo que faltaría es que al cambiar de opción, oculte la que esta seleccionada con anterioridad, ¿Cómo debería hacerlo?
Una imagen como ejemplo:
En esta imagen primero seleccione un radio, luego "me arrepentí" y elejí otro, quedó la opcion 1 y opcion 2 desplegados. le hice las cruces ++++++ para diferenciar.




Espero que me puedan ayudar.

Saludos.