Foros del Web » Programando para Internet » Javascript »

radio button y divs

Estas en el tema de radio button y divs en el foro de Javascript en Foros del Web. hola! Quisiera saber si me pueden ayudar con este form... Luego de muchos (muchísimos) intentos y pruebas logre que funcione a medias este formulario, lo ...
  #1 (permalink)  
Antiguo 26/04/2014, 15:48
 
Fecha de Ingreso: febrero-2003
Mensajes: 37
Antigüedad: 21 años, 8 meses
Puntos: 0
Pregunta radio button y divs

hola! Quisiera saber si me pueden ayudar con este form... Luego de muchos (muchísimos) intentos y pruebas logre que funcione a medias este formulario, lo que necesito es que al clickear sobre un radio button se muestro la div correspondiente, lo logre con 1, pero con 2 no hay forma... Asi mismo con hasta 6.... aca el código! Help me!!!

Saludos y gracias por lo que puedan hacer

<!doctype html>
<html>
<head>
<meta charset="windows-1250">
<title>Untitled Document</title>

<script>
<!--

function cantidad_hijos(elemento) {

if(elemento.value=="0") {
document.getElementById("hijos1").style.display = "none";
} else {
document.getElementById("hijos1").style.display = "block";
}
}

-->
</script>

</head>

<body>

<form>

<p>
<label for="hijos">Hijos</label>
<input name="hijos" id="hijos"type="radio" value="0" checked="checked" onclick="cantidad_hijos(this)" />0
<input name="hijos" id="hijos" type="radio" value="1" onclick="cantidad_hijos(this)" />1
<input name="hijos" id="hijos" type="radio" value="2" onclick="cantidad_hijos(this)" />2
<br />
</p>

<div id="hijos1" style="display:none">
<label for="nombre">Nombre: </label> <input name="nombre" type="text" id="nombre" /><br />
<label for="edad">Edad: </label> <input name="edad" type="text" id="edad" /><br />
<label for="dni">DNI: </label> <input name="dni" type="text" id="dni" /><br />
</div>

<div id="hijos2" style="display:none">
<label for="nombre">Nombre: </label> <input name="nombre" type="text" id="nombre" /><br />
<label for="edad">Edad: </label> <input name="edad" type="text" id="edad" /><br />
<label for="dni">DNI: </label> <input name="dni" type="text" id="dni" /><br /><br />
------------------<br /><br />
<label for="nombre2">Nombre: </label> <input name="nombre2" type="text" id="nombre2" /><br />
<label for="edad2">Edad: </label> <input name="edad2" type="text" id="edad2" /><br />
<label for="dni2">DNI: </label> <input name="dni2" type="text" id="dni2" /><br />

</div>

</form>

</body>
</html>
  #2 (permalink)  
Antiguo 26/04/2014, 17:25
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 7 meses
Puntos: 1284
Respuesta: radio button y divs

Hola:

Los atributos id deben ser únicos... y en el ejemplo pones "hijos" cuatro veces...

Más o menos sería...

for (i = 1; i <= 3; i++)
document.getElementById("hijos" + i).style.display = (i == elemento.value) ? "block":"none";

La idea es hacer un bucle para todos los hijos, y mostrar solo el que coincide con el value del radio chequeado...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por caricatos; 26/04/2014 a las 17:30 Razón: faltaba el style.
  #3 (permalink)  
Antiguo 26/04/2014, 17:31
Avatar de Alexis88
Philosopher
 
Fecha de Ingreso: noviembre-2011
Ubicación: Tacna, Perú
Mensajes: 5.552
Antigüedad: 13 años
Puntos: 977
Respuesta: radio button y divs

Podrías hacerlo así. A cada radio button, asígnale como valor el Id del <div> que le corresponda, de este modo, cuando des un clic en cualquiera de ellos, aplicas una función que recorra a los elementos <div> en cuestión y solamente aquel cuyo Id sea igual al valor del radio button clickeado, se muestra, caso contrario, se oculta.



Con Array.prototype.forEach.call, aplico la función que puedes ver a cada radio button y luego vuelvo a utilizar este método para aplicar la función que muestra u oculta los elementos <div> en cada uno de ellos. Como podrás ver, tomo a los radio button por su nombre y a los <div> por su nombre de clase, esto es para no crear confusión con otros elementos en el documento.

Saludos

Edito: Se me adelantó caricatos.
__________________
«Juro por mi vida y mi amor por ella, que jamás viviré para el provecho de otro hombre, ni le pediré a otro hombre que viva para el mío».

Ayn Rand

Última edición por Alexis88; 26/04/2014 a las 17:48
  #4 (permalink)  
Antiguo 27/04/2014, 15:40
 
Fecha de Ingreso: febrero-2003
Mensajes: 37
Antigüedad: 21 años, 8 meses
Puntos: 0
Sonrisa Respuesta: radio button y divs

Muchísimas gracias!!! Voy atrabajar por ahi y les cuento
Saludos!

Etiquetas: button, divs, formulario, funcion, html, input, radio
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:34.