Tema: Como hago para ocultar los checkbox no selecionados?
Ver Mensaje Individual
  #2 (permalink)  
Antiguo 23/09/2013, 17:16
franjgg
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 10 meses
Puntos: 4
Respuesta: Como hago para ocultar los checkbox no selecionados?
He conseguido hacer lo que necesita, ahora la cosa es que cuando marcamos dos checkbox aparecen sus campos text respectivos, pero no consigo que cuando desmarcamos uno de ellos ocute el restante tambien,

El codigo:

Código HTML: 
Ver original
  1. <script>
  2. //Número máximo de casillas marcadas por cada fila
  3. var maxi=2;
  4. var maxii=2;
  5.  
  6. //El contador es un arrayo de forma que cada posición del array es una linea del formulario
  7. var contador=new Array(0,0);
  8. var contador1=new Array(0,0);
  9.  
  10. function validar(check,grupo) {
  11.     //Compruebo si la casilla está marcada
  12.     if (check.checked==true){
  13.         //está marcada, entonces aumento en uno el contador del grupo
  14.         contador[grupo]++;
  15.         //compruebo si el contador ha llegado al maximo permitido
  16.         
  17.  
  18.  
  19.         if (contador[grupo]==maxi) {
  20.             //si ha llegado al máximo, muestro mensaje de error
  21.  
  22.             if(document.getElementById("af_1").checked==true){
  23.         document.getElementById("content1").style.display= 'block';
  24.     }
  25.             if(document.getElementById("af_2").checked==true){
  26.         document.getElementById("content2").style.display= 'block';
  27.     }    
  28.             if(document.getElementById("af_3").checked==true){
  29.         document.getElementById("content3").style.display= 'block';
  30.     }    
  31.             if(document.getElementById("af_4").checked==true){
  32.         document.getElementById("content4").style.display= 'block';
  33.     }    
  34.             if(document.getElementById("af_5").checked==true){
  35.         document.getElementById("content5").style.display= 'block';
  36.     }    
  37.             if(document.getElementById("af_6").checked==true){
  38.         document.getElementById("content6").style.display= 'block';
  39.     }    
  40.             if(document.getElementById("af_7").checked==true){
  41.         document.getElementById("content7").style.display= 'block';
  42.     }    
  43.             if(document.getElementById("af_8").checked==true){
  44.         document.getElementById("content8").style.display= 'block';
  45.     }    
  46.             if(document.getElementById("af_9").checked==true){
  47.         document.getElementById("content9").style.display= 'block';
  48.     }                                
  49.  
  50.         }
  51.  
  52.             if (contador[grupo]>maxi) {
  53.  
  54.                 check.checked=false;
  55.             }
  56.  
  57.     }
  58.  
  59.     if (check.checked==false){
  60.  
  61.  
  62.         contador[grupo]--;
  63.  
  64.             if (contador[grupo]<maxi) {
  65.  
  66.                 contador[grupo]--;
  67.                 maxi--;
  68.  
  69.  
  70.             if(document.getElementById("af_1").checked==false){
  71.         document.getElementById("content1").style.display= 'none';
  72.     }
  73.             if(document.getElementById("af_2").checked==false){
  74.         document.getElementById("content2").style.display= 'none';
  75.     }    
  76.             if(document.getElementById("af_3").checked==false){
  77.         document.getElementById("content3").style.display= 'none';
  78.     }    
  79.             if(document.getElementById("af_4").checked==false){
  80.         document.getElementById("content4").style.display= 'none';
  81.     }    
  82.             if(document.getElementById("af_5").checked==false){
  83.         document.getElementById("content5").style.display= 'none';
  84.     }    
  85.             if(document.getElementById("af_6").checked==false){
  86.         document.getElementById("content6").style.display= 'none';
  87.     }    
  88.             if(document.getElementById("af_7").checked==false){
  89.         document.getElementById("content7").style.display= 'none';
  90.     }    
  91.             if(document.getElementById("af_8").checked==false){
  92.         document.getElementById("content8").style.display= 'none';
  93.     }    
  94.             if(document.getElementById("af_9").checked==false){
  95.         document.getElementById("content9").style.display= 'none';
  96.     }  
  97.         
  98.                 }
  99.  
  100.                 
  101.     }
  102.  
  103.  
  104.  
  105. }
  106. </script>
  107. <form action="" method="post" enctype="multipart/form-data" name="formulario" id="formulario">
  108. <table width="760">
  109.  
  110.                 <tr>
  111.                         <td width="50px" valign="top" style="padding:15px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_1,0)' id="af_1" name="af_1">
  112. <input type="text" id="content1" name="" style="display: none;">
  113.                         </td>
  114.  
  115.                         <td style="padding:15px 0px 0px 0px;">
  116.  
  117.                         1.   Doy mucho valor a lo que es correcto. Creo que tengo un                        
  118.                             
  119.                         </td>
  120.                 </tr>
  121.                 
  122.                 <tr>
  123.                         <td width="50px" valign="top" style="padding:25px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_2,0)' id="af_2" name="af_2">
  124. <input type="text" id="content2" name="" style="display: none;">
  125.                         </td>
  126.  
  127.                         <td style="padding:25px 0px 0px 0px;">
  128.  
  129.                         2.  Busco ayudar, agradar. Estoy casi siempre pendiente de los .
  130.                             
  131.                         </td>
  132.                 </tr>
  133.                 
  134.                 <tr>
  135.                         <td width="50px" valign="top" style="padding:25px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_3,0)' id="af_3" name="af_3">
  136. <input type="text" id="content3" name="" style="display: none;">
  137.                         </td>
  138.  
  139.                         <td style="padding:25px 0px 0px 0px;">
  140.  
  141.                         3.  Trabajo intensamente y hago lo que me propongo. Soy 
  142.                             
  143.                         </td>
  144.                 </tr> 
  145.  
  146.                 <tr>
  147.                         <td width="50px" valign="top" style="padding:15px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_4,0)' id="af_4" name="af_4">
  148. <input type="text" id="content4" name="" style="display: none;">
  149.                         </td>
  150.  
  151.                         <td style="padding:25px 0px 0px 0px;">
  152.  
  153.                         4.  Soy creativa, original, empática, intuitiva, intensa. Puedo 
  154.                             
  155.                         </td>
  156.                 </tr>                 
  157.                        
  158.  
  159.                 <tr>
  160.  
  161.  
  162.                 <tr>
  163.                         <td width="50px" valign="top" style="padding:25px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_5,0)' id="af_5" name="af_5">
  164. <input type="text" id="content5" name="" style="display: none;">
  165.                         </td>
  166.  
  167.                         <td style="padding:25px 0px 0px 0px;">
  168.  
  169.                         5.  Soy generalmente callada, objetiva y analítica. Prefiero 
  170.                             
  171.                         </td>
  172.                 </tr>  
  173.  
  174.  
  175.  
  176.                 <tr>
  177.                         <td width="50px" valign="top" style="padding:25px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_6,0)' id="af_6" name="af_6">
  178. <input type="text" id="content6" name="" style="display: none;">
  179.                         </td>
  180.  
  181.                         <td style="padding:25px 0px 0px 0px;">
  182.  
  183.                         6.  Dudo de casi todo y mucho de las intenciones de los demás,  
  184.                             
  185.                         </td>
  186.                 </tr>  
  187.  
  188.  
  189.  
  190.                 <tr>
  191.                         <td width="50px" valign="top" style="padding:25px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_7,0)' id="af_7" name="af_7">
  192. <input type="text" id="content7" name="" style="display: none;">
  193.                         </td>
  194.  
  195.                         <td style="padding:25px 0px 0px 0px;">
  196.  
  197.                         7.  Soy emprendedora, divertida y entusiasta, imagino 
  198.                             
  199.                         </td>
  200.                 </tr>  
  201.  
  202.  
  203.                 <tr>
  204.                         <td width="50px" valign="top" style="padding:25px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_8,0)' id="af_8" name="af_8">
  205. <input type="text" id="content8" name="" style="display: none;">
  206.                         </td>
  207.  
  208.                         <td style="padding:25px 0px 0px 0px;">
  209.  
  210.                         8.  Soy asertiva, directa, generosa y trabajadora, hago que las 
  211.                             
  212.                         </td>
  213.                 </tr>                                                  
  214.  
  215.  
  216.                 <tr>
  217.                         <td width="50px" valign="top" style="padding:25px 0px 13px 40px;"><input type="checkbox" onclick='validar(formulario.af_9,0)' id="af_9" name="af_9">
  218. <input type="text" id="content9" name="" style="display: none;">
  219.                         </td>
  220.  
  221.                         <td style="padding:25px 0px 0px 0px;">
  222.  
  223.                         9.   Soy una persona tranquila, adaptable y sencilla. Prefiero 
  224.                             
  225.                         </td>
  226.                 </tr> 
  227.                
  228.   </table>
  229. </form>

A ver si alguien se le ocurre como se puede hacer esto

Saludos!!