Desplegar lista de checkbox

angel_dope · #1 (**permalink**) 07/05/2010, 05:21

Hola tod@s, os cuento lo que quiero hacer, que imagino que no debe ser tan dificil, pero yo no lo consigo

Tengo una lista de checkbox, cada uno tiene un value diferente y hay dos niveles. Por un lado hay tres cuyo value es 017010, 017020 y 017030 y de cada una de estas depende otras, cuyos values son 01701010, 01701020, 017030, 01702010... y lo que quiero hacer es que de primeras solo se vean las tres principales, y al hacer click sobre alguna de ellas, que se desplieguen debajo las que dependen de ella.
Por poner un simil, sería como cuando exploramos las carpetas del ordenador y al darle al + que en la barra de la izquierda, se nos despliegan sus subcarpetas.
Espero haberme explicado bien, que a veces lio mucho las cosas.
Salu2

_cronos · #2 (**permalink**) 07/05/2010, 08:19

A ver qué te parece esto:

Código HTML:

Ver original<html>
 <head>
  <title>A</title>
 </head>
 <body>
  <form name="f1" id="f1" action="" method="post">
   <input type="checkbox" value="1" id="c1" onClick='desplegar()'>Opción 1<br>
 
   <input type="checkbox" value="2" id="c2" onClick='desplegar()'>Opción 2<br>
   <input type="checkbox" value="3" id="c3" onClick='desplegar()'>Opción 3<br>
   <div style="visibility:hidden" id='div1'>
   <input type="checkbox" value="1.1" id="c11">Opción 1.1  
   <input type="checkbox" value="1.2" id="c12">Opción 1.2
   </div><div style="visibility:hidden" id='div2'>
   <input type="checkbox" value="2.1" id="c21">Opción 2.1
   <input type="checkbox" value="2.2" id="c22">Opción 2.2
   </div><div style="visibility:hidden" id='div3'>
   <input type="checkbox" value="3.1" id="c31">Opción 3.1
   <input type="checkbox" value="3.2" id="c32">Opción 3.2</div>
 
  </form>
 </body>
</html>

Código Javascript:

Ver original<script type="text/javascript">
   function desplegar(){
    var c1 = document.getElementById('c1');
    var c2 = document.getElementById('c2');
    var c3 = document.getElementById('c3');
    var div1 = document.getElementById('div1');
    var div2 = document.getElementById('div2');
    var div3 = document.getElementById('div3');
    if(c1.checked==true){
     div1.style.visibility = 'visible';   
    }else{
     div1.style.visibility = 'hidden';
    }
    if(c2.checked==true){
     div2.style.visibility = 'visible';   
    }else{
     div2.style.visibility = 'hidden';
    }
    if(c3.checked==true){
     div3.style.visibility = 'visible';   
    }else{
     div3.style.visibility = 'hidden';
    }
   } 
  </script>

El problema que tiene es que si sólo se despliega el 2º o el 3º lo hacen más abajo pero eso se puede solucionar con un poco de CSS ¿no?
Saludos (: