Foros del Web » Programando para Internet » Javascript »

Validar que se seleccione minimo un checkbox

Estas en el tema de Validar que se seleccione minimo un checkbox en el foro de Javascript en Foros del Web. Hola forer@s, básicamente es lo que dice el titulo del post... Mediante PHP genero checkbox dinámicos con el nombre cap[] algo asi @import url("http://static.forosdelweb.com/clientscript/vbulletin_css/geshi.css"); Código ...
  #1 (permalink)  
Antiguo 05/06/2012, 19:39
Avatar de malakian  
Fecha de Ingreso: septiembre-2010
Ubicación: $malakian->Colombia();
Mensajes: 469
Antigüedad: 13 años, 7 meses
Puntos: 45
Validar que se seleccione minimo un checkbox

Hola forer@s, básicamente es lo que dice el titulo del post...

Mediante PHP genero checkbox dinámicos con el nombre cap[]

algo asi

Código HTML:
Ver original
  1. <input type="checkbox" name="cap[]" value="algo en php" />

le coloco ese nombre para obtener un arreglo en PHP, pero quiero validar que por lo menos uno este seleccionado antes de enviar a PHP.

Hice esto:

Código Javascript:
Ver original
  1. var cap = document.forms[0].cap;
pero queda undefined

y esto error de sintaxis
Código Javascript:
Ver original
  1. var cap = document.forms[0].cap[];
solo quiero acceder al control, Me dan una mano?
__________________
Guitar Loco, Desarrollador Web PHP
Sigueme: @jose1x
  #2 (permalink)  
Antiguo 05/06/2012, 20:33
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Validar que se seleccione minimo un checkbox

Tenés que recorrer todos los checkboxes con ese name, y verificar que alguno de ellos esté checked == true

Código Javascript:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <title>titulo</title>
  6. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  7. </head>
  8. <body>
  9. <form action="#" method="post" onsubmit="return verificar();">
  10. <div>
  11. <input type="checkbox" name="cap[]" value="2">
  12. <input type="checkbox" name="cap[]" value="3">
  13. <input type="checkbox" name="cap[]" value="4">
  14. <input type="checkbox" name="cap[]" value="5">
  15. <input type="submit" />
  16. </div>
  17. </form>
  18. <script type="text/javascript">
  19. //<![CDATA[
  20. function verificar(){
  21. var suma = 0;
  22. var los_cboxes = document.getElementsByName('cap[]');
  23. for (var i = 0, j = los_cboxes.length; i < j; i++) {
  24.    
  25.     if(los_cboxes[i].checked == true){
  26.     suma++;
  27.     }
  28. }
  29.  
  30. if(suma == 0){
  31. alert('debe seleccionar una casilla');
  32. return false;
  33. }else{
  34. alert(suma);
  35. }
  36.  
  37. }
  38. //]]>
  39. </script>
  40. </body>
  41. </html>

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 07/06/2012, 07:50
Avatar de malakian  
Fecha de Ingreso: septiembre-2010
Ubicación: $malakian->Colombia();
Mensajes: 469
Antigüedad: 13 años, 7 meses
Puntos: 45
Respuesta: Validar que se seleccione minimo un checkbox

emprear muchas gracias voy a probar...

hey que respuesta la tuya, nunca había visto esto:
Código Javascript:
Ver original
  1. for (var i = 0, j = los_cboxes.length; i < j; i++) {

Inicializar dos variables en esa parte del ciclo... excelente
__________________
Guitar Loco, Desarrollador Web PHP
Sigueme: @jose1x
  #4 (permalink)  
Antiguo 07/06/2012, 11:00
 
Fecha de Ingreso: noviembre-2003
Ubicación: Zaragoza, España
Mensajes: 1.257
Antigüedad: 20 años, 5 meses
Puntos: 154
Respuesta: Validar que se seleccione minimo un checkbox

Hola a tod@s,

Escribo esto aquí porque considero que no es necesario abrir otro tema, dado que mi consulta está directamente relacionada con esto.

El asunto es que yo utilizo el script que ha propuesto emprear (mil gracias), pero yo lo uso en el botón, con el evento onclick porque hay varias opciones, pongo el código y luego lo explico mejor:


El script de emprear (un poco modificado por los requerimientos):

Código Javascript:
Ver original
  1. <script languaje="javascript">
  2. function verificar_uno(){
  3. var suma = 0;
  4. var checks = document.getElementsByName('ids[]');
  5. for (var i = 0, j = checks.length; i < j; i++) {
  6.     if(checks[i].checked == true){
  7.     suma++;
  8.     }
  9. }
  10.  
  11. if(suma == 0){
  12.     alert('Debes seleccionar un registro');
  13.     return false;
  14. }
  15.  
  16. }
  17.  
  18. </script>

Un resumen del formulario:

Código PHP:
Ver original
  1. <form name="form" id="form" action="proceso.php" method="POST">
  2. <table>
  3. <tr>
  4.  
  5. <td><input type="checkbox" name="chkall" onclick="sel()"></td>
  6. <td>ID</td>
  7. <td>Nombre</td>
  8. <td>Apellidos</td>
  9. <td varios></td>
  10.  
  11. <?php
  12. //Aquí hago las consultas para generar la parte dinámica de la tabla
  13. ?>
  14.  
  15. <tr>
  16.  
  17. <td><input type="checkbox" id="ids" name="ids[]" value="<?php echo $row[0] ?>"></td>
  18. <td><?php echo $row[0] ?></td>
  19. <td><?php echo $row[1] ?></td>
  20. <td><?php echo $row[2] ?></td>
  21. <td varios> </td>
  22.  
  23. </tr>
  24.  
  25. <tr>
  26.  
  27. <td colspan="5">
  28. <blockquote><b>Acciones en Masa:</b></blockquote>
  29. <center>
  30. <input type="submit" name="submit" value="Borrar Usuarios" onclick="javascript:if(confirm('¿Realmente deseas eliminar los registros seleccionados? ')){document.forms['form'].submit();}">
  31. <input type="submit" name="submit" value="Añadir Usuarios">
  32. </div></center><br>
  33.  
  34. <blockquote><b>Acciones sobre un sólo miembro:</b></blockquote>
  35.  
  36. <center>
  37. <input type="submit" name="submit" value="Editar Usuario" [COLOR="Green"]onclick="return verificar_uno();"[/COLOR]>
  38. <input type="submit" name="submit" value="Borrar Usuario" onclick="javascript:[COLOR="Red"]return verificar_uno();if(confirm('¿Realmente deseas eliminar el registro seleccionado? ')){document.forms['form'].submit();}else{}[/COLOR]">
  39. <input type="submit" name="submit" value="Añadir Usuario">
  40. </div></center><br>
  41. </td>
  42. </tr>
  43. </table>
  44. </form>

Bien, como podéis ver, es una tabla que se genera con los registros de una base de datos, teniendo cada registro un checkbox para realizar las acciones necesarias.

La parte de validaciones en PHP no hay problema, pero lo que pretendo es también validar mediante JavaScript antes del envío.

Si sólo utilizo la función del script de emprear, (lo que he puesto en verde) funciona perfectamente.

El problema es cuando intento utilizar la función junto con otra validación (lo que está en rojo), ahí me funciona la validación de comprobar que se ha seleccionado un check pero no actúa la otra comprobación (if(confirm('¿Realmente deseas eliminar el registro seleccionado? ')){document.forms['form'].submit();}else{}), es decir, envía el formulario directamente.

No respeta los colores dentro del código pero creo que se entiende igual...

Entonces la pregunta es:

¿Qué puede estar pasando para que sólo actúe la primera validación y cómo se puede resolver?

Agradeceré cualquier ayuda. Muchas gracias por anticipado.
  #5 (permalink)  
Antiguo 07/06/2012, 14:25
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 meses
Puntos: 1567
Respuesta: Validar que se seleccione minimo un checkbox

@rbczgz
Creo que estás complicándote un poco
El form está un poco imperfecto, pero creo que la idea a aplicar es esta

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script languaje="javascript">
  7.  
  8. function verificar_uno(param){
  9. var cuales = param;
  10. var suma = 0;
  11. var marcando;
  12. var checks = document.getElementsByName('ids[]');
  13. for (var i = 0, j = checks.length; i < j; i++) {
  14.  
  15.  
  16.    // sumar los marcados
  17.   if(checks[i].checked == true){
  18.    suma++;
  19.    }
  20.    
  21. // marcar desmarcar todos (la función recibe un parámetro  
  22.    if(cuales == 'todos'){
  23.    checks[i].checked = true;
  24.     marcando = 1; // ponemos marcando en 1 para saber que no nos interesa procesar el form por ahora
  25.     }
  26.    
  27.    if(cuales == 'nada'){
  28.    checks[i].checked = false;
  29.     marcando = 1;
  30.     }
  31.  
  32. }
  33.  
  34.  
  35.  
  36. if(marcando != 1){
  37.  
  38. // si no sumo suma = 0, entonces
  39.     if(suma == 0){
  40.    alert('Debes seleccionar un registro');
  41.    return false;
  42.     }else{
  43.     //Confirmación para uno o varios   
  44.         if(suma == 1){
  45.         var texto = 'el usuario seleccionado';
  46.         }else{
  47.         var texto = 'los usuarios seleccionados';
  48.         }
  49.     var pregunta = confirm("¿Realmente deseas eliminar " + texto +"?")
  50.     if(pregunta){
  51.     // no haces nada y el form se procesa
  52.     }else{
  53.     alert('Operación cancelada');
  54.     // cancelas el envío
  55.     return false;
  56.     }
  57.    
  58.     }
  59.    
  60. }
  61.    
  62.    
  63. }
  64.  
  65.  
  66. </head>
  67. <form name="form" id="form" action="proceso.php" method="POST" onsubmit="return verificar_uno()">
  68. <tr>
  69.  
  70. <td>marcar todos<input type="radio" name="marcar" id="todos" onclick="verificar_uno(this.id)">desmarcar todos<input type="radio" name="marcar" id="nada" onclick="verificar_uno(this.id)"> </td>
  71. <td>ID</td>
  72. <td>Nombre</td>
  73. <td>Apellidos</td>
  74. <td varios></td>
  75.  
  76. <?php
  77. //Aquí hago las consultas para generar la parte dinámica de la tabla
  78. ?>
  79.  
  80. <tr>
  81.  
  82. <td><input type="checkbox" id="ids" name="ids[]" value="<?php echo $row[0] ?>"></td>
  83. <td><input type="checkbox" id="ids2" name="ids[]" value="<?php echo $row[0] ?>"></td>
  84. <td> </td>
  85.  
  86. </tr>
  87.  
  88. <tr>
  89.  
  90. <td colspan="5">
  91. <center>
  92. <input type="submit" name="submit" value="Eliminar seleccionados">
  93. <input type="submit" name="submit" value="Añadir Usuario">
  94. </div></center><br>
  95. </td>
  96. </tr>
  97. </form>
  98.  
  99. </body>
  100. </html>

Como se supone que cada fila de usuario tiene su propio checkbox para habilitarlo, manejás todo con un solo botón sumbit, y el evento se define en el form, la función marcar /desmarcar, está integrada en verificar_uno(), salvo que en ese caso se le pasa un parámetro desde el click de los radiobuttons, en ese caso el submit no se hace. faltaría definir para que sirve "añadir usuario"

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 08/06/2012, 00:56
 
Fecha de Ingreso: noviembre-2003
Ubicación: Zaragoza, España
Mensajes: 1.257
Antigüedad: 20 años, 5 meses
Puntos: 154
Respuesta: Validar que se seleccione minimo un checkbox

Muchas gracias emprear por tu respuesta tan completa.

Me iría bien que me dijeras por qué el form está un poco imperfecto, puede ser porque sólo he puesto un resumen y a lo mejor lo he resumido demasiado, pero si es por otra cosa, siempre estoy dispuesto a aprender para hacerlo mejor.

La idea está genial, pero le veo dos problemas para lo que yo necesito:

1.- No tengo espacio para colocar 2 radios en el hueco donde está el check para marcar/desmarcar todo (como dije, es un "resumen" del formulario, realmente tiene 15 columnas )

2.- Tal como planteas el script, no da la opción de avisar cuando es necesario seleccionar al menos 2 o sólo 1 como máximo, que es lo que yo necesito, puesto que hay 2 botones para acciones sobre 2 ó más registros (Acciones en masa) y 3 botones para sólo 1 registro (Acciones sobre un sólo miembro), entonces, en los botones para acciones sobre 2 o más registros necesito confirmar que el usuario ha seleccionado al menos 2 y en los otros que no ha seleccionado más de 1.

El botón añadir usuario que, como ves, está en las 2 "secciones", es para añadir uno o varios usuarios a otra tabla, pero es necesario que vaya por separado (2 ó más en "Acciones en masa" y 1 como máximo en "Acciones sobre un sólo miembro".

No se si lo he explicado bien, espero que se entienda...
  #7 (permalink)  
Antiguo 08/06/2012, 02:38
 
Fecha de Ingreso: noviembre-2003
Ubicación: Zaragoza, España
Mensajes: 1.257
Antigüedad: 20 años, 5 meses
Puntos: 154
Respuesta: Validar que se seleccione minimo un checkbox

Hola de nuevo,

Te pido disculpas por la respuesta anterior @emprear, estaba aún un poco dormido y no se me había ocurrido "discurrir" cómo adaptar tus enseñanzas a mis necesidades, por eso, ahora que estoy ya despierto del todo, me respondo a mi mismo y dejo aquí el código por si le sirve a alguien, conste que está todo basado en lo que inicialmente aportaste, @emprear (un millón de gracias)

Cita:
Iniciado por emprear Ver Mensaje

Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <title>titulo</title>
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6. <script languaje="javascript">
  7.  
  8. function verificar_uno(param){
  9. var cuales = param;
  10. var suma = 0;
  11. var marcando;
  12. var checks = document.getElementsByName('ids[]');
  13. for (var i = 0, j = checks.length; i < j; i++) {
  14.  
  15.  
  16.    // sumar los marcados
  17.   if(checks[i].checked == true){
  18.    suma++;
  19.    }
  20.    
  21. // marcar desmarcar todos (la función recibe un parámetro  
  22.    if(cuales == 'todos'){
  23.    checks[i].checked = true;
  24.     marcando = 1; // ponemos marcando en 1 para saber que no nos interesa procesar el form por ahora
  25.     }
  26.    
  27.    if(cuales == 'nada'){
  28.    checks[i].checked = false;
  29.     marcando = 1;
  30.     }
  31.  
  32. }
  33.  
  34.  
  35.  
  36. if(marcando != 1){
  37.  
  38. // si no sumo suma = 0, entonces
  39.     if(suma == 0){
  40.    alert('Debes seleccionar un registro');
  41.    return false;
  42.     }else{
  43.     //Confirmación para uno o varios   
  44.         if(suma == 1){
  45.         var texto = 'el usuario seleccionado';
  46.         }else{
  47.         var texto = 'los usuarios seleccionados';
  48.         }
  49.     var pregunta = confirm("¿Realmente deseas eliminar " + texto +"?")
  50.     if(pregunta){
  51.     // no haces nada y el form se procesa
  52.     }else{
  53.     alert('Operación cancelada');
  54.     // cancelas el envío
  55.     return false;
  56.     }
  57.    
  58.     }
  59.    
  60. }
  61.    
  62.    
  63. }
  64.  
  65.  
  66. </head>
  67. <form name="form" id="form" action="proceso.php" method="POST" onsubmit="return verificar_uno()">
  68. <tr>
  69.  
  70. <td>marcar todos<input type="radio" name="marcar" id="todos" onclick="verificar_uno(this.id)">desmarcar todos<input type="radio" name="marcar" id="nada" onclick="verificar_uno(this.id)"> </td>
  71. <td>ID</td>
  72. <td>Nombre</td>
  73. <td>Apellidos</td>
  74. <td varios></td>
  75.  
  76. <?php
  77. //Aquí hago las consultas para generar la parte dinámica de la tabla
  78. ?>
  79.  
  80. <tr>
  81.  
  82. <td><input type="checkbox" id="ids" name="ids[]" value="<?php echo $row[0] ?>"></td>
  83. <td><input type="checkbox" id="ids2" name="ids[]" value="<?php echo $row[0] ?>"></td>
  84. <td> </td>
  85.  
  86. </tr>
  87.  
  88. <tr>
  89.  
  90. <td colspan="5">
  91. <center>
  92. <input type="submit" name="submit" value="Eliminar seleccionados">
  93. <input type="submit" name="submit" value="Añadir Usuario">
  94. </div></center><br>
  95. </td>
  96. </tr>
  97. </form>
  98.  
  99. </body>
  100. </html>


Código Javascript:
Ver original
  1. function verificar_uno(){
  2. var suma = 0;
  3. var checks = document.getElementsByName('ids[]');
  4. for (var i = 0, j = checks.length; i < j; i++) {
  5.     if(checks[i].checked == true){
  6.     suma++;
  7.     }
  8. }
  9.  
  10. if(suma == 0){
  11.     alert('Debes seleccionar un registro');
  12.     return false;
  13. }
  14.  
  15. }
  16.  
  17. function verificar_varios(){
  18. var suma = 0;
  19. var checks = document.getElementsByName('ids[]');
  20. for (var i = 0, j = checks.length; i < j; i++) {
  21.     if(checks[i].checked == true){
  22.     suma++;
  23.     }
  24. }
  25.  
  26. if(suma < 2){
  27.     alert('Debes seleccionar al menos 2 registros');
  28.     return false;
  29. }
  30.  
  31. }
  32.  
  33. function verificar_borrar_uno(param){
  34. var cuales = param;
  35. var suma = 0;
  36. var checks = document.getElementsByName('ids[]');
  37. for (var i = 0, j = checks.length; i < j; i++) {
  38.  
  39.     // sumar los marcados
  40.    if(checks[i].checked == true){
  41.     suma++;
  42.     }
  43.  
  44. }
  45.  
  46. // si no sumo suma = 0, entonces
  47.     if(suma == 0){
  48.     alert('Debes seleccionar un registro');
  49.     return false;
  50.     }else{
  51.     //Confirmación para uno o varios    
  52.         if(suma == 1){
  53.         var texto = 'el usuario seleccionado';
  54.         }else{
  55.         var texto = 'los usuarios seleccionados';
  56.         }
  57.     var pregunta = confirm("¿Realmente deseas eliminar " + texto +"?")
  58.     if(pregunta){
  59.     // no haces nada y el form se procesa
  60.     }else{
  61.     // cancelas el envío
  62.     return false;
  63.     }
  64.    
  65.     }
  66.  
  67.  
  68.  }
  69.  
  70. function verificar_borrar_varios(param){
  71. var cuales = param;
  72. var suma = 0;
  73. var checks = document.getElementsByName('ids[]');
  74. for (var i = 0, j = checks.length; i < j; i++) {
  75.  
  76.     // sumar los marcados
  77.    if(checks[i].checked == true){
  78.     suma++;
  79.     }
  80.  
  81. }
  82.  
  83. // si no sumo suma = 0, entonces
  84.     if(suma < 2){
  85.     alert('Debes seleccionar al menos 2 registros');
  86.     return false;
  87.     }else{
  88.     //Confirmación para uno o varios    
  89.         if(suma == 1){
  90.         var texto = 'el usuario seleccionado';
  91.         }else{
  92.         var texto = 'los usuarios seleccionados';
  93.         }
  94.     var pregunta = confirm("¿Realmente deseas eliminar " + texto +"?")
  95.     if(pregunta){
  96.     // no haces nada y el form se procesa
  97.     }else{
  98.     // cancelas el envío
  99.     return false;
  100.     }
  101.    
  102.     }
  103.  
  104.  
  105.  }

Y luego llamo a las diferentes funciones (que más que diferentes son casi iguales) desde cada botón, dependiendo de la acción que vaya a realizar:

Código PHP:
Ver original
  1. <td colspan="15">
  2. <blockquote><b>Acciones en Masa:</b></blockquote>
  3.  
  4. <center>
  5. <input type="submit" name="submit" value="Borrar Usuarios" onclick="return verificar_borrar_varios()">
  6. <input type="submit" name="submit" value="Añadir al rotador" onclick="return verificar_varios();">
  7. </center><br>
  8.  
  9. <blockquote><b>Acciones sobre un sólo miembro:</b></blockquote>
  10.  
  11. <center>
  12. <input type="submit" name="submit" value="Editar Usuario" onclick="return verificar_uno();">
  13. <input type="submit" name="submit" value="Borrar Usuario" onclick="return verificar_borrar_uno()">
  14. <input type="submit" name="submit" value="Añadir Usuario" onclick="return verificar_uno();">
  15. </center>
  16. </td>

Esto seguro se puede depurar y mejorar, pero yo no lo se hacer... Pero por lo menos me ha servido para aprender un poco más y conseguir lo que necesitaba.

Etiquetas: checkbox, input, php
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




La zona horaria es GMT -6. Ahora son las 12:30.