Foros del Web » Programando para Internet » Javascript »

Como hago para ocultar los checkbox no selecionados?

 Estas en el tema de Como hago para ocultar los checkbox no selecionados? en el foro de Javascript en Foros del Web. Hola amigos, Vereis tengo este codigo que al marcar dos checbox muestra y ocultar dos text la cosa es que necesitaria que los demas checkbox ...
  #1 (permalink)  
Antiguo 23/09/2013, 15:21
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 1 mes
Puntos: 4
Como hago para ocultar los checkbox no selecionados?
Hola amigos,

Vereis tengo este codigo que al marcar dos checbox muestra y ocultar dos text la cosa es que necesitaria que los demas checkbox que no han dido marcados se oculten al pulsar dos de ellos.

Este es el codigo:

Código HTML: 
Ver original
  1. <script>
  2. //Número máximo de casillas marcadas por cada fila
  3. var maxi=1;
  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.  
  9. function validar(check,grupo) {
  10.     //Compruebo si la casilla está marcada
  11.     if (check.checked==true){
  12.         //está marcada, entonces aumento en uno el contador del grupo
  13.         contador[grupo]++;
  14.         //compruebo si el contador ha llegado al maximo permitido
  15.         if (contador[grupo]>maxi) {
  16.             //si ha llegado al máximo, muestro mensaje de error
  17.         document.getElementById("content").style.display= 'block';
  18.         document.getElementById("content1").style.display= 'block';        
  19.  
  20.             //alert('No se pueden elegir más de '+maxi+' casillas a la vez.');
  21.             //desmarco la casilla, porque no se puede permitir marcar
  22.             //check.checked=false;
  23.             //resto una unidad al contador de grupo, porque he desmarcado una casilla
  24.             //contador[grupo]--;
  25.         }else{
  26.         document.getElementById("content").style.display= 'none';
  27.  
  28.         }
  29.     }
  30.  
  31.     if (check.checked==false){
  32.  
  33.         contador[grupo]--;
  34.  
  35.             if (contador[grupo]<maxii) {
  36.  
  37.                     document.getElementById("content").style.display= 'none';
  38.                     document.getElementById("content1").style.display= 'none';
  39.                 }
  40.     }
  41. }
  42. </script>
  43. <form action="" method="post" enctype="multipart/form-data" name="formulario" id="formulario">
  44. <table width="76">
  45.     <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox1,0)' name='checkbox1' value='checkbox1'></td>
  46.     <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox2,0)' name='checkbox2' value='checkbox2'></td>
  47.     <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox3,0)' name='checkbox3' value='checkbox3'></td>
  48.     <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox4,0)' name='checkbox4' value='checkbox3'></td>
  49.     <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox5,0)' name='checkbox5' value='checkbox3'></td>
  50.     <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox6,0)' name='checkbox6' value='checkbox3'></td>
  51.     <td width='20' valign='top'><input type='checkbox' onclick='validar(formulario.checkbox7,0)' name='checkbox7' value='checkbox3'></td>                
  52.   </table>
  53. </form>
  54.  
  55.  
  56. <input type="text" id="content" name="" style="display: none;">
  57. <input type="text" id="content1" name="" style="display: none;">


A ver si alguien se le ocurre como podria hacer esto


Saludos!!!
  #2 (permalink)  
Antiguo 23/09/2013, 17:16
 
Fecha de Ingreso: marzo-2007
Mensajes: 751
Antigüedad: 17 años, 1 mes
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!!
  #3 (permalink)  
Antiguo 24/09/2013, 10:31
Avatar de PIRRUMAN  
Fecha de Ingreso: febrero-2006
Ubicación: Monterrey, Nuevo León
Mensajes: 633
Antigüedad: 18 años, 3 meses
Puntos: 53
Respuesta: Como hago para ocultar los checkbox no selecionados?
adecuandolo a tu codigo , primero una funcion que ocultara todos los text box cuando un check se inactiva

Código Javascript: 
Ver original
  1. function ocultar(){
  2. caja=document.getElementsByTagName("input");
  3. for(var i=0;i<caja.length;i++)
  4. {
  5. if(caja[i].type == 'text')
  6. {
  7. document.getElementById(caja[i].id).style.display="none";
  8. }
  9. }
  10. }

despues llamarla en cada caso

Código Javascript: 
Ver original
  1. if(document.getElementById("af_1").checked==false){
  2.   ocultar();
  3. }
  4. if(document.getElementById("af_2").checked==false){
  5.   ocultar();
  6. }    
  7. if(document.getElementById("af_3").checked==false){
  8.   ocultar();
  9. }    
  10. if(document.getElementById("af_4").checked==false){
  11.   ocultar();
  12. }    
  13. if(document.getElementById("af_5").checked==false){
  14.   ocultar();
  15. }    
  16. if(document.getElementById("af_6").checked==false){
  17.   ocultar();
  18. }    
  19. if(document.getElementById("af_7").checked==false){
  20.   ocultar();
  21. }    
  22. if(document.getElementById("af_8").checked==false){
  23.   ocultar();
  24. }    
  25. if(document.getElementById("af_9").checked==false){
  26.   ocultar();
  27. }

optimizando un poco la ultima parte

Código Javascript: 
Ver original
  1. for(cantidadchk=1;cantidadchk<=9;cantidadchk++)
  2. {
  3.     if(document.getElementById("af_"+cantidadchk).checked==false){
  4.   ocultar();
  5. }
__________________
“Prefiero ser un tonto momentaneo que un eterno ignorante”
“¡El éxito es resultado de los aciertos,los aciertos resultado de la experiencia y la experiencia resultado de los errores!”

Etiquetas: checkbox, formulario, input
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:54.