Tema: Desplegar lista de checkbox
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 07/05/2010, 08:19
Avatar de _cronos
_cronos
 
Fecha de Ingreso: abril-2010
Mensajes: 135
Antigüedad: 14 años, 8 meses
Puntos: 1
Respuesta: Desplegar lista de checkbox
A ver qué te parece esto:

Código HTML: 
Ver original
  1. <html>
  2.  <head>
  3.   <title>A</title>
  4.  </head>
  5.  <body>
  6.   <form name="f1" id="f1" action="" method="post">
  7.    <input type="checkbox" value="1" id="c1" onClick='desplegar()'>Opción 1<br>
  8.  
  9.    <input type="checkbox" value="2" id="c2" onClick='desplegar()'>Opción 2<br>
  10.    <input type="checkbox" value="3" id="c3" onClick='desplegar()'>Opción 3<br>
  11.    <div style="visibility:hidden" id='div1'>
  12.    <input type="checkbox" value="1.1" id="c11">Opción 1.1  
  13.    <input type="checkbox" value="1.2" id="c12">Opción 1.2
  14.    </div><div style="visibility:hidden" id='div2'>
  15.    <input type="checkbox" value="2.1" id="c21">Opción 2.1
  16.    <input type="checkbox" value="2.2" id="c22">Opción 2.2
  17.    </div><div style="visibility:hidden" id='div3'>
  18.    <input type="checkbox" value="3.1" id="c31">Opción 3.1
  19.    <input type="checkbox" value="3.2" id="c32">Opción 3.2</div>
  20.  
  21.   </form>
  22.  </body>
  23. </html>
Código Javascript: 
Ver original
  1. <script type="text/javascript">
  2.    function desplegar(){
  3.     var c1 = document.getElementById('c1');
  4.     var c2 = document.getElementById('c2');
  5.     var c3 = document.getElementById('c3');
  6.     var div1 = document.getElementById('div1');
  7.     var div2 = document.getElementById('div2');
  8.     var div3 = document.getElementById('div3');
  9.     if(c1.checked==true){
  10.      div1.style.visibility = 'visible';   
  11.     }else{
  12.      div1.style.visibility = 'hidden';
  13.     }
  14.     if(c2.checked==true){
  15.      div2.style.visibility = 'visible';   
  16.     }else{
  17.      div2.style.visibility = 'hidden';
  18.     }
  19.     if(c3.checked==true){
  20.      div3.style.visibility = 'visible';   
  21.     }else{
  22.      div3.style.visibility = 'hidden';
  23.     }
  24.    } 
  25.   </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 (: