ocultar y mostrar div con botones radios

jakuam · #1 (**permalink**) 28/10/2009, 06:41

Estimados quiero hacer que cuando seleccionen un boton radio se muestre un div oculto y cuando seleccionen otro este se oculte y se muestre otro.. y he probado de varias maneras y logro que los muestre pero no que se oculte cuando selecciono otro boton radio.. le dejo el codigo
javascript

Código:

<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>

radios boton

Código:

<input name="pago" type="radio" id="pago4" onclick="showMe('tarjeta', this)" value="tarjeta" />
<input name="pago" type="radio" id="pago3" onclick="showMe('contado', this)" value="tarjeta" />

DIVS

Código:

<div id="tarjeta" name="tarjeta" style="display:none" class="texto_gris"> aaa </div>
<div id="contado" name="tarjeta" style="display:none" class="texto_gris"> aaa </div>

espero su ayuda.. gracias

Adler · #2 (**permalink**) 28/10/2009, 08:05

Hola

Estudia esto. La dinámica es la misma para ambos casos

Código javascript:

Ver original<html>
<style type="text/css">
.ocultar {display:none;}
.mostrar {display:block;}
</style>
<script type="text/javascript">
var visto_subm = null;
var visto_color = null;
function ver(num) {
obj = document.getElementById("sub"+num);
 
obj.className = (obj==visto_subm) ? 'ocultar' : 'mostar';
 
    if (visto_subm != null) {
        visto_subm.className = 'ocultar';
 
    }
 
visto_subm = (obj==visto_subm) ? null : obj;
}
 
</script>
<head>
</head>
<body>
<div id="0" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU0</div>
<div id="sub0" class="ocultar" style="z-index:1;">
SubMenu0<br />
SubMenu0<br />
SubMenu0
</div>
 
<div id="1" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU1</div>
<div id="sub1" class="ocultar" style="z-index:1;">
SubMenu1<br />
SubMenu1<br />
SubMenu1
</div>
 
 
<div id="2" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU2</div>
<div id="sub2" class="ocultar" style="z-index:1;">
SubMenu2<br />
SubMenu2<br />
SubMenu2
</div>
 
 
<div id="3" class="nosel" onclick="ver(this.id)" style="z-index:1;">MENU3</div>
<div id="sub3" class="ocultar" style="z-index:1;">
SubMenu3<br />
SubMenu3<br />
SubMenu3
</div>
 
</body>
</html>

Suerte