¿Cómo puedo validar y verificar checkboxes?

[dfmex]

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?

[DataLore]

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:

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.

[abimaelrc]

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:

<script type="text/javascript">
function addEvent(obj,type,fun){  
    if(obj.addEventListener){  
        obj.addEventListener(type,fun,false);  
    }else if(obj.attachEvent){  
        var f=function(){  
            fun.call(obj,window.event);  
        }  
        obj.attachEvent('on'+type,f);  
        obj[fun.toString()+type]=f;  
    }else{  
        obj['on'+type]=fun;  
    }  
}
window.onload = function(){
    var foo = document.getElementsByName('foo[]');
    for(var i = 0; i < foo.length; i++){
        addEvent(foo[i], 'click', function(){
            if(this.checked){
                alert(this.value);
            }
        });
    }
}
</script>
<input type="checkbox" name="foo[]" value="foo1" />
<input type="checkbox" name="foo[]" value="foo2" />
<input type="checkbox" name="foo[]" value="foo3" />
<input type="checkbox" name="foo[]" value="foo4" />
<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.

[dfmex]

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:

<!-- En este ejemplo el formulario se llama "Tallas" -->
 
<script type="text/javascript" language="javascript">
 
function Checar(){
    var elLength = document.Tallas.elements.length;
    var Seleccionados = '';
    var display = '';
    var hids = '';
    var b = 0;
    
    for (i=0; i<elLength; i++)
    {
        var type = Tallas.elements[i].type;
        var nombre = Tallas.elements[i].name;
        var valor = Tallas.elements[i].value;
        var totales = document.Tallas.elements.length;
        
        if (type=="checkbox" && Tallas.elements[i].checked){
            
            if( (b != 0) && (b != totales) ){ var linea = "|"; }else{ var linea = ""; }
            
            if(linea == "|"){var agregar = "|" + valor + "&" + nombre;  var mostrar = ", " + nombre; var esconder = "|" + valor;}
            else if(linea == ""){var agregar = "" + valor + "&" + nombre; var mostrar = "" + nombre; var esconder = "" + valor;}
            
            var Seleccionados = Seleccionados + agregar;
            var display = display + mostrar;
            var hids = hids + esconder;
            
            b++;
        }
        else {  }
        
    }
    
    if(b == 0){ alert('No se ha seleccionado NADA'); }
    else{
    alert(Seleccionados);
    alert(display);
    alert(hids);
    }
}
 
</script>