Mostar y ocultar capas con radio button

hurricane · #1 (**permalink**) 17/02/2006, 02:38

Estoy haciendo un formulario y desería que mediante un radio button con dos opciones si pulsa la opción1 aparezcan unos campos o una capa y si pulsa en la opcion2 aparezacan otros campos y otra capa. ¿se puede hacer esto con Javascript?

Amröd · #2 (**permalink**) 17/02/2006, 02:58

en el onChange/onClick testea q opcion esta seleccionada y cambia el style:display de lo q quieras mostrar/ocultar a none o inline/block.

si usas CSS es todavia mas facil, pues haces lo mismo cambiando clases. El requisito es haber definido alguna clase oculto y otra visible, por ejemplo.

hurricane · #3 (**permalink**) 17/02/2006, 03:44

Gracias por tu respuesta pero la verdad es que de Javascript estoy bastante verde. Supongamos que tengo una capa que se llama capa1 y otra capa2. Tengo dos radio button para mostrar y ocultar las capas. El código de los radio button sería mas o menos así:

<input name="" type="radio" onChange="codigo javascript">

La duda que tengo es el código que tengo que incluir dentro del onChange, ya te digo que de Javascript estoy verde y no se por donde empezar. ¿me puedes echar un cable? Gracias.

Amröd · #4 (**permalink**) 17/02/2006, 04:51

A ver si este codigo te puede ayudar algo.

Funciona para gecko pero seria mas correcto si la referencia a "capa" fuera por medio de window.document.getElementById('capa')

Espero q te sirva.

-------------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Prueba</title>

<script>
function cambiaCapa (valor)
{
if (valor=="ocultar")
{
capa.className = "oculto";
} else
{
capa.className = "visible";
}
}
</script>

<style>
*.visible {
display:block;
}

*.oculto {
display:none;
}

</style>

</head>

<body style="background-color:#CCFFCC">
<form>

<div>
RadioVer <input type="radio" id="opRadioVer" name="opRadio" value="ver" onClick="cambiaCapa(this.value)">
</div>
<div>
RadioOcultar <input type="radio" id="opRadioOcultar" name="opRadio" value="ocultar" onClick="cambiaCapa(this.value)" checked>
</div>

<div id="capa" class="oculto">
<button>BOTON</button>
</div>

</form>
</body>
</html>