Foros del Web » Programando para Internet » Javascript »

¿Cómo puedo validar y verificar checkboxes?

Estas en el tema de ¿Cómo puedo validar y verificar checkboxes? en el foro de Javascript en Foros del Web. Hola que tal! Tengo un problema, lo que quiero hacer, es crear una funcion JavaScript que me permita verificar todos los campos "checkbox" que existan ...
  #1 (permalink)  
Antiguo 17/10/2011, 16:00
 
Fecha de Ingreso: octubre-2008
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 3
Pregunta ¿Cómo puedo validar y verificar checkboxes?

Hola que tal!

Tengo un problema, lo que quiero hacer, es crear una funcion JavaScript que me permita verificar todos los campos "checkbox" que existan en mi formulario. La cantidad de campos "checkbox" en realidad es variable ya que se generan desde PHP, pueden ser 5, puede ser 1, o pueden ser cualquier numero, por eso necesito que la función verifique TODOS los CHECKBOX existentes en el formulario, uno por uno.


Para poner un ejemplo, digamos que tengo estos 3 checkbox:

Código HTML:
<input name="GrupoTallas10" value="10" id="GrupoTallas_10" type="checkbox">
    G<br>
<input name="GrupoTallas11" value="11" id="GrupoTallas_11" type="checkbox">
    L<br>
<input name="GrupoTallas12" value="12" id="GrupoTallas_12" type="checkbox">
    M<br> 
Al apretar un boton que pondría yo bajo un "ONCLICK" yo necesito que UNICAMENTE los checkbox seleccionados se enlisten en una variable asi:

VALOR|CHECKBOXNOMBRE

Por ejemplo: Selecciono el checkbox G (valor 10, nombre GrupoTallas10), y se definiría la siguiente variable:

var seleccionados = '10|GrupoTallas10';

Si selecciono 2 o mas checkboxes quedaría así:

var seleccionados = '10|GrupoTallas10*11|GrupoTallas11*12|GrupoTallas1 2';

Es decir, cada checkbox queda separado por un *, y el valor y el nombre de cada checkbox los separa una linea de estas: |


¿Alguien me podría por favor orientar a como crear esta función por favor?
  #2 (permalink)  
Antiguo 17/10/2011, 18:48
Avatar de DataLore  
Fecha de Ingreso: junio-2008
Mensajes: 58
Antigüedad: 12 años
Puntos: 5
Respuesta: ¿Cómo puedo validar y verificar checkboxes?

La idea entonces es buscar de alguna manera como recuperar un elemento por javascript. Sin entrar a usar librerías vamos a lo básico:

Código Javascript:
Ver original
  1. document.getElementById('idElemento');

Esta función propia de Javascript te recuperará el elemento cuyo id sea idElemento. Ten presente que como bien diste id's a los checks con un prefijo común a todos y un postfijo numérico incremental te será sencillo arbitrar alguna manera para, usando la función que arriba te indiqué con un pequeño cambio, recorrerlos todos.
Por otro lado te recomiento W3Schools referencia obligada para toda duda HTML entre otros.

Particularmente hecha un vistaso a : http://www.w3schools.com/jsref/dom_obj_checkbox.asp
Cualquier duda vuelve a preguntar.
  #3 (permalink)  
Antiguo 17/10/2011, 21:53
Avatar de abimaelrc
Colaborador
 
Fecha de Ingreso: mayo-2009
Ubicación: En el planeta de Puerto Rico
Mensajes: 14.734
Antigüedad: 11 años
Puntos: 1517
Respuesta: ¿Cómo puedo validar y verificar checkboxes?

Una forma muy sencilla para validar checkbox es que el nombre del campo sea en forma de array, luego la verificación es sencilla con algo como
Código Javascript:
Ver original
  1. <script type="text/javascript">
  2. function addEvent(obj,type,fun){  
  3.     if(obj.addEventListener){  
  4.         obj.addEventListener(type,fun,false);  
  5.     }else if(obj.attachEvent){  
  6.         var f=function(){  
  7.             fun.call(obj,window.event);  
  8.         }  
  9.         obj.attachEvent('on'+type,f);  
  10.         obj[fun.toString()+type]=f;  
  11.     }else{  
  12.         obj['on'+type]=fun;  
  13.     }  
  14. }
  15. window.onload = function(){
  16.     var foo = document.getElementsByName('foo[]');
  17.     for(var i = 0; i < foo.length; i++){
  18.         addEvent(foo[i], 'click', function(){
  19.             if(this.checked){
  20.                 alert(this.value);
  21.             }
  22.         });
  23.     }
  24. }
  25. </script>
  26. <input type="checkbox" name="foo[]" value="foo1" />
  27. <input type="checkbox" name="foo[]" value="foo2" />
  28. <input type="checkbox" name="foo[]" value="foo3" />
  29. <input type="checkbox" name="foo[]" value="foo4" />
  30. <input type="checkbox" name="foo[]" value="foo5" />

Con eso puedes ver que si seleccionas un checkbox te muestra el valor correspondiente. Lo que es recomendable es hacer la verificación del lado del servidor, no importando si usas Javascript o no para verificar también, ya que se puede indicar en el navegador que no se quiere el uso de javascript y con ello pueden ingresar datos no deseados. Siempre, siempre, siempre se debe hacer la validación del lado del servidor.
__________________
Verifica antes de preguntar.
Los verdaderos amigos se hieren con la verdad, para no perderlos con la mentira. - Eugenio Maria de Hostos
  #4 (permalink)  
Antiguo 17/10/2011, 22:30
 
Fecha de Ingreso: octubre-2008
Mensajes: 147
Antigüedad: 11 años, 7 meses
Puntos: 3
De acuerdo Respuesta: ¿Cómo puedo validar y verificar checkboxes?

Gracias por sus respuestas;

He finalmente logrado hacer la función que necesitaba (gracias a un poco de este foro, otro poco de otros foros).

Aquí dejo el código por si en un futuro alguien llegara a requerir algo similar.

Código Javascript:
Ver original
  1. <!-- En este ejemplo el formulario se llama "Tallas" -->
  2.  
  3. <script type="text/javascript" language="javascript">
  4.  
  5. function Checar(){
  6.     var elLength = document.Tallas.elements.length;
  7.     var Seleccionados = '';
  8.     var display = '';
  9.     var hids = '';
  10.     var b = 0;
  11.    
  12.     for (i=0; i<elLength; i++)
  13.     {
  14.         var type = Tallas.elements[i].type;
  15.         var nombre = Tallas.elements[i].name;
  16.         var valor = Tallas.elements[i].value;
  17.         var totales = document.Tallas.elements.length;
  18.        
  19.         if (type=="checkbox" && Tallas.elements[i].checked){
  20.            
  21.             if( (b != 0) && (b != totales) ){ var linea = "|"; }else{ var linea = ""; }
  22.            
  23.             if(linea == "|"){var agregar = "|" + valor + "&" + nombre;  var mostrar = ", " + nombre; var esconder = "|" + valor;}
  24.             else if(linea == ""){var agregar = "" + valor + "&" + nombre; var mostrar = "" + nombre; var esconder = "" + valor;}
  25.            
  26.             var Seleccionados = Seleccionados + agregar;
  27.             var display = display + mostrar;
  28.             var hids = hids + esconder;
  29.            
  30.             b++;
  31.         }
  32.         else {  }
  33.        
  34.     }
  35.    
  36.     if(b == 0){ alert('No se ha seleccionado NADA'); }
  37.     else{
  38.     alert(Seleccionados);
  39.     alert(display);
  40.     alert(hids);
  41.     }
  42. }
  43.  
  44. </script>

Etiquetas: campos, formulario, funcion, php, verificar, botones
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 02:18.