uso de tablas con radios, es posible?

merceorion · #1 (**permalink**) 02/12/2007, 03:16

Holas!
Les explico, he estado averiguando si es posible hacer lo siguiente:
necesito mostrar tablas según el radio que haya elegido la persona (dos opciones: SI o NO) en caso de elegir SI me tiene que 'esconder' el radio al igual que la pregunta y seguido de eso me muestra solo la tabla correspondiente al radio en caso de elegir NO no haga nada, esto se aplica a todos los radios que yo pueda seleccionar. Acá tengo un ejemplo que es lo que quiero aplicar pero aun no entiendo porque no me aplica bien, me muestra todas las tablas y debería mostrar solo una de las tres tablas y lo otro es que no se como 'esconder' de una forma la pregunta al igual que los radio.

Código HTML:

<html>
<head>
<script type="text/javascript">
function mostrar(num) {
document.getElementById('tabla1').style.display = (num==0) ? 'none' : 'block';
document.getElementById('tabla2').style.display = (num==0) ? 'none' : 'block';
document.getElementById('tabla3').style.display = (num==0) ? 'none' : 'block';
}
</script>
</head>
<body>
<form name="form">
<p>Mostrar primera tabla: <input type="radio" name="rad" onclick="mostrar(1)" />
Ocultar: <input type="radio" name="rad" checked="checked"  onclick="mostrar(0)" /></p>
<table id="tabla1" style="display:none">
<tr><td>aqui va tabla1</td></tr>
</table>
<p>Mostrar segunda tabla: <input type="radio" name="rad2" onclick="mostrar(1)" />
Ocultar: <input type="radio" name="rad2" checked="checked" onclick="mostrar(0)" /></p>
<table id="tabla2" style="display:none">
<tr><td>aqui va tabla2</td></tr>
</table>
<p>Mostrar tercera tabla: <input type="radio" name="rad3"  onclick="mostrar(1)" />
Ocultar: <input type="radio" name="rad3" checked="checked" onclick="mostrar(0)" /></p>
<table id="tabla3" style="display:none">
<tr><td>aqui va tabla3</td></tr>
</table>
</form>
</body>
</html>

espero que me haya aclarado bien y que me puedan ayudar.
de antemano muchas gracias.

saludos!

JavierB · #2 (**permalink**) 02/12/2007, 04:15

Hola merceorion

Pon así los radio:

Código:

<input type="radio" name="rad" onclick="mostrar(1,1)" />
<input type="radio" name="rad" onclick="mostrar(1,2)" />
<input type="radio" name="rad" onclick="mostrar(1,3)" />

La función para mostrar/ocultar:

Código:

function mostrar(num,tab) {
  document.getElementById('tabla'+tab).style.display = (num==0) ? 'none' : 'block';
}

Saludos,

merceorion · #3 (**permalink**) 02/12/2007, 16:06

holas JavierB

Muchas gracias por la ayuda que me has brindado, me ha servido mucho para seguir en lo que necesito y funciona muy bien.
saludos!