Foros del Web - Ver Mensaje Individual

nilburcion · #6 (**permalink**) 15/01/2012, 13:18

Lo que ha dicho Nexus10, te faltan los names, te quedaria así:

Código:

<html> 
<head> 
<script> 

function prod_uno(num,visible,campos) {
if (visible==true) {
for(var i=1;i<=campos;i++) {
document.getElementById("uno"+i).style.display = "none";
}
document.getElementById("uno"+num).style.display = "block";
}else{
document.getElementById("uno"+num).style.display = "none";
}
}

function prod_dos(num,visible,campos) {
if (visible==true) {
for(var i=1;i<=campos;i++) {
document.getElementById("dos"+i).style.display = "none";
}
document.getElementById("dos"+num).style.display = "block";
}else{
document.getElementById("dos"+num).style.display = "none";
}
}

function prod_tres(num,visible,campos) {
if (visible==true) {
for(var i=1;i<=campos;i++) {
document.getElementById("tres"+i).style.display = "none";
}
document.getElementById("tres"+num).style.display = "block";
}else{
document.getElementById("tres"+num).style.display = "none";
}
}

</script> 


</head> 
<body> 

<form name=form> 

<input type="radio" name="nombreuno" id="nombreuno" value="S" onClick="prod_uno(1,true,4)">Grupo A1<br />

<input type="radio" name="nombreuno" id="nombreuno" value="N" onClick="prod_uno(2,true,4)">Grupo A2<br />

<input type="radio" name="nombreuno" id="nombreuno" value="S" onClick="prod_uno(3,true,4)">Grupo A3<br />

<input type="radio" name="nombreuno" id="nombreuno" value="N" onClick="prod_uno(4,true,4)">Grupo A4<br />

<br />

<input type="radio" name="nombredos" id="nombredos" value="S" onClick="prod_dos(1,true,4)">Grupo B1<br />

<input type="radio" name="nombredos" id="nombredos" value="N" onClick="prod_dos(2,true,4)">Grupo B2<br />
    
<input type="radio" name="nombredos" id="nombredos" value="S" onClick="prod_dos(3,true,4)">Grupo B3<br />

<input type="radio" name="nombredos" id="nombredos" value="N" onClick="prod_dos(4,true,4)">Grupo B4<br />

<br />

<input type="radio" name="nombretres" id="nombretres" value="S" onClick="prod_tres(1,true,4)">Grupo C1<br />

<input type="radio" name="nombretres" id="nombretres" value="N" onClick="prod_tres(2,true,4)">Grupo C2<br />

<input type="radio" name="nombretres" id="nombretres" value="S" onClick="prod_tres(3,true,4)">Grupo C3<br />

<input type="radio" name="nombretres" id="nombretres" value="N" onClick="prod_tres(4,true,4)">Grupo C4<br />

<br />
Resultados:
<br />

<!-- 
(Aquí van apareciendo los resultados a medida que se van haciendo clic en los grupos: una opción de cada grupo, uno debajo del otro, p. ej:)

"Mensaje 1, del Grupo A"
"Mensaje 3, del Grupo B"
"Mensaje 4, del Grupo C"

-->


<span style="display:none" id="uno1">Mensaje elegido 1, del Grupo A</span>
<span style="display:none" id="uno2">Mensaje elegido 2, del Grupo A</span>
<span style="display:none" id="uno3">Mensaje elegido 3, del Grupo A</span>
<span style="display:none" id="uno4">Mensaje elegido 4, del Grupo A</span>

<span style="display:none" id="dos1">Mensaje elegido 1, del Grupo B</span>
<span style="display:none" id="dos2">Mensaje elegido 2, del Grupo B</span>
<span style="display:none" id="dos3">Mensaje elegido 3, del Grupo B</span>
<span style="display:none" id="dos4">Mensaje elegido 4, del Grupo B</span>

<span style="display:none" id="tres1">Mensaje elegido 1, del Grupo C</span>
<span style="display:none" id="tres2">Mensaje elegido 2, del Grupo C</span>
<span style="display:none" id="tres3">Mensaje elegido 3, del Grupo C</span>
<span style="display:none" id="tres4">Mensaje elegido 4, del Grupo C</span>

</form> 

</body> 
</html>

Ademas, si quieres comprimir el código(NO simplificarlo) puedes usar esta herramienta que por ahora solo admite comprimir JavaScript aqui te la dejo,
te recomiendo su uso cuando hayas acabado definitivamente de editar el codigo ya que después es mas dificil su lectura:

[URL="http://closure-compiler.appspot.com/home"]Compilador JS[/URL]

Tu código JavaScript (compilado) quedaría así:

Código:

function prod_uno(b,a,c){if(!0==a){for(a=1;a<=c;a++)document.getElementById("uno"+a).style.display="none";document.getElementById("uno"+b).style.display="block"}else document.getElementById("uno"+b).style.display="none"}function prod_dos(b,a,c){if(!0==a){for(a=1;a<=c;a++)document.getElementById("dos"+a).style.display="none";document.getElementById("dos"+b).style.display="block"}else document.getElementById("dos"+b).style.display="none"}
function prod_tres(b,a,c){if(!0==a){for(a=1;a<=c;a++)document.getElementById("tres"+a).style.display="none";document.getElementById("tres"+b).style.display="block"}else document.getElementById("tres"+b).style.display="none"};