Tema: Deshabilitar DIV con un checkbox
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 07/05/2009, 01:05
Avatar de KarlanKas
KarlanKas
Moderador extraterrestre
  
Fecha de Ingreso: diciembre-2001
Ubicación: Madrid
Mensajes: 6.987
Antigüedad: 22 años, 5 meses
Puntos: 61
Respuesta: Deshabilitar DIV con un checkbox
Es esto lo que quieres?
Código javascript: 
Ver original
  1. <html>
  2. <head>
  3. <title>Prueba</title>
  4. <script>
  5. antigua="";
  6. function obj(x){
  7.     return document.getElementById(x)
  8. }
  9. function mostrar(nombreCapa,esto){
  10.  
  11.     if(esto.title!="off"){
  12.         if(antigua!="" && antigua!=nombreCapa){
  13.             ocultar(antigua);
  14.         }
  15.         
  16.         obj(nombreCapa).style.display="block";
  17.         antigua=nombreCapa
  18.     }
  19. }
  20.  
  21. function ocultar(nombreCapa){
  22. obj(nombreCapa).style.display="none";
  23. }
  24.  
  25. function mostrartodas(){
  26.     
  27. mostrar('capa1',obj('res'))
  28. mostrar('capa2',obj('acu'))
  29. mostrar('capa3',obj('int'))
  30. mostrar('capa4',obj('ind'))
  31.  
  32. }
  33.  
  34.  
  35. function ocultartodas(){
  36. ocultar('capa1')
  37. ocultar('capa2')
  38. ocultar('capa3')
  39. ocultar('capa4')
  40. }
  41.  
  42. function habilitar(queHacer,aqui,donde){
  43. obj(aqui).title=(queHacer)?"on":"off";
  44.  
  45. if(!queHacer){
  46.     obj(donde).style.display="none"
  47. }
  48. }
  49.  
  50.  
  51. </script>
  52.  
  53.  
  54. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  55. </head>
  56.  
  57. <body>
  58. <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  59.   <tr>
  60.     <td><p><a href="#" onClick="mostrartodas();return false">Ver todas las capas</a></p>
  61.     </td>
  62.   </tr>
  63. </table>
  64. <p>
  65.   <input name="box1" type="checkbox" onclick="habilitar(this.checked,'res','capa1')" /> 
  66.   Responsability
  67.   <br>
  68.   <input name="box2" type="checkbox" onclick="habilitar(this.checked,'acu','capa2')" />
  69. Accuracy <br>
  70. <input name="box3" type="checkbox"  onclick="habilitar(this.checked,'int','capa3')" /> 
  71.   Integrity
  72.   <br>
  73.   <input name="box4" type="checkbox" onclick="habilitar(this.checked,'ind','capa4')" />
  74.   Independence</p>
  75. <div style="position:absolute; margin-top:80px; left: 29px; top: 107px; width: 79px; border:thin #000000" align="right">
  76.     <a id="res" href="#" title="off" onClick="javascript:mostrar('capa1',this);return false" >RESPONSABILTY</a>
  77. </div>
  78.  
  79. <div style="position:absolute; margin-top:80px; left: 176px; top: 113px; width: 79px;" align="right">
  80.     <a  id="acu" href="#" title="off" onClick="javascript:mostrar('capa2',this);return false">ACCURACY</a>
  81. </div>
  82.  
  83. <div style="position:absolute; margin-top:80px; left: 275px; top: 113px; width: 79px;" align="right">
  84.     <a id="int" href="#" title="off" onClick="javascript:mostrar('capa3',this);return false">INTEGRITY</a>
  85. </div>
  86.  
  87. <div style="position:absolute; margin-top:80px; left: 377px; top: 113px; width: 79px;" align="right">
  88.     <a id="ind" href="#" title="off" onClick="javascript:mostrar('capa4',this);return false">INDEPENDENCE</a>
  89. </div>
  90.  
  91. <p>&nbsp;</p>
  92. <p>&nbsp;</p>
  93. <p>&nbsp;</p>
  94. <p>&nbsp;</p>
  95. <p><br>
  96.   <br>
  97.   <br>
  98.   <br>
  99.   <br>
  100. </p>
  101. <p>&nbsp;</p>
  102. <p>&nbsp;</p>
  103. <p>&nbsp;</p>
  104. <table width="100%"  border="0" cellspacing="0" cellpadding="0">
  105.   <tr>
  106.     <td><a href="#" onClick="javascript:ocultartodas('capa1','capa2','capa3');">Cerrar todas las capas</a></td>
  107.   </tr>
  108. </table>
  109. <p>&nbsp;</p>
  110. <div id="capa1" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 38px; top: 230px; z-index: 15; display:none" align="center" top-margin="100px">
  111.   <p>&nbsp;</p>
  112.   <p>&nbsp;</p>
  113.   <p align="center"> CAPA 1 </p>
  114. </div>
  115. <div id="capa2" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:414px; height:204px; position:absolute; left: 38px; top: 230px; z-index: 10; display:none" align="center" top-margin="100px">
  116.   <p>&nbsp;</p>
  117.   <p>&nbsp;</p>
  118.   <p align="center"> CAPA 2 </p>
  119. </div>
  120. <div id="capa3" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 5; display:none" align="center" top-margin="100px">
  121.   <p>&nbsp;</p>
  122.   <p>&nbsp;</p>
  123.   <p align="center"> CAPA 3 </p>
  124. </div>
  125. <div id="capa4" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 0; display:none" align="center" top-margin="100px">
  126.   <p>&nbsp;</p>
  127.   <p>&nbsp;</p>
  128.   <p align="center"> CAPA 4 </p>
  129. </div>
  130. </body>
  131. </html>

Confío en que te sirva! He cambiado un par de cosas de tu código, pero he intentado respetar el espíritu (y que funcione, claro!).

Un saludo!
__________________
Cómo escribir

No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia.