seleccionar grupos de checkbox

[mrtorch]

Holas, me he quebrado la cabeza tratando seleccionar distintos grupos de checkbox. Me explico. En una pantalla tengo una grilla (grilla principal) en la que voy agregando registros a medida que voy seleccionando opciones en unos div que también tienen grillas.
Cada div (2) lo he dejado flotante (popup). en cada grilla hay checkbox, y en los div también hay checkbox, pero no tienen relación entre sí.

html:
comboBox > opciónX ---visualiza tbody oculto con botónA.
botónA ---despliega divFamilia(grilla con chkbox, linksFilaX, btnAgregar)
divFamilia > linkFilaX--despliega divHijosFamiliaX(grilla con chkbox, btnAgregar)

al elegir un chk de divFamilia y presionar btnAgregar, se creará fila en grilla principal, lo mismo ocurriría si selecciono sólo un hijo de la familia en el divHijosFamiliaX.

En las tres grillas tengo la opción de seleccionar todos o ninguno, pero ocurre que al usar, se me seleccionan absolutamente todos los checkbox existentes.
He intentado reconocer al padre de cada div, para así limitar la creación del array de inputs sólo a los hijos del div o grilla en uso, pero no resulta.

Código:

function ppp(padre,op) {
     var hijos=document.getElementById(padre).childNodes;
   if(op==1){
        for (var i=0; i<hijos.length; i++) {
	if (hijos[i].getAttribute('type') == 'checkbox') ins[i].checked =true;
        }
   }
   if(op==0){
        for (var i=0; i<hijos.length; i++) {
	if (hijos[i].getAttribute('type') == 'checkbox') ins[i].checked =false;
        }
   }

     alert("mis niños!!!= " +hijos);
}

Código:

Seleccionar: 
<a href="javascript:;" class="c11" onClick="ppp('esteDiv',1);">Todos</a> 
/<a href="javascript:;" class="c11" onClick="checkAll2ppp('esteDiv',1);">Ninguno</a>

Una ayudita por el amor de Dios.....
Thanks

[derkenuke]

Aqui llega la ayuda. He hecho un script que no depende del id del DIV padre, es únicamente DOM:

Código PHP:

  <div style="border:solid 1px black; margin:4px;">
    <p> <input type="checkbox" onchange="cambiaGrupo(this)" />    TODOS / NINGUNO</p>
    <p> <input type="checkbox" /> chk1</p>
    <p> <input type="checkbox" /> chk2</p>
    <p> <input type="checkbox" /> chk3</p>
    <p> <input type="checkbox" /> chk4</p>
</div>

<div style="border:solid 1px black; margin:4px;">
    <p> <input type="checkbox" onchange="cambiaGrupo(this)" />    TODOS / NINGUNO</p>
    <p> <input type="checkbox" /> chk1</p>
    <p> <input type="checkbox" /> chk2</p>
    <p> <input type="checkbox" /> chk3</p>
    <p> <input type="checkbox" /> chk4</p>
    <p> <input type="checkbox" /> chk5</p>
</div>

<div style="border:solid 1px black; margin:4px;">
    <p> <input type="checkbox" onchange="cambiaGrupo(this)" />    TODOS / NINGUNO</p>
    <p> <input type="checkbox" /> chk1</p>
    <p> <input type="checkbox" /> chk2</p>
    <p> <input type="checkbox" /> chk3</p>
</div>



<script>

function cambiaGrupo(chk) {
    var padreDIV=chk;
    while( padreDIV.nodeType==1 && padreDIV.tagName.toUpperCase()!="DIV" )
        padreDIV=padreDIV.parentNode;
    //ahora que padreDIV es el DIV, cogeremos todos sus checkboxes
    var padreDIVinputs=padreDIV.getElementsByTagName("input");
    for(var i=0; i<padreDIVinputs.length; i++) {
        if( padreDIVinputs[i].getAttribute("type")=="checkbox" )
            padreDIVinputs[i].checked = chk.checked;
    }
}

</script> 
  

Te va a venir bien, supongo. Con el while vamos mirando cada padre, a ver si tiene de etiqueta DIV, y cuando la tenga paramos, así ya tenemos el DIV y sólo queda recoger los checkboxes hijos.


Un saludo.

[mrtorch]

Ok muchas grax estimado, lo voy a probar.

[mrtorch]

Secillamente espectacular , funcionó a las mil maravillas!!
Muchas gracias.
Vales oro.

[derkenuke]

De nada!

[esthercita]

Muchas gracias por tu aportación, me ha venido genial.

Me gustaría que me ayudasen en otro problema que me ha surgido...

¿Cómo podría hacer que si des-selecciono todos los checkbox hijos de uno de los div, se des-selecione también el checkbox padre?

Y lo mismo, si selecciono todo los checkbox hijos, cómo podría hacer para que se seleccionase el padre también...?

Muchísimas gracias de antemano.

[derkenuke]

Hola esthercita:

Es algo viejo el hilo, pero te contesto: Tan sólo tendrás que añadir un onchange a todos los checkbox de un grupo, y asociarlo con una función x(). Esa x() es la encargada de verificar si todos los checkbox del grupo están seleccionados. En caso afirmativo seleccionaremos también el primero (firstChild).
En caso de que todos estén deseleccionados deseleccionaremos el primero.


Saludos

[esthercita]

Muchísimas gracias por tu respuesta, la verdad es que como era un hilo antiguo no estaba seguro de si iban a leerlo.

La verdad es que esta es la primera vez que me enfrento con javascript y ando muy muy verde. Intenté hacer lo que te comenté de los combos a través de una lógica de contadores. El problema es que como no estoy nada familiariazada con javascript aun no lo he conseguido.

Te pego el código del ejemplo que he intentado hacer funcionar:

<div style="border:solid 1px black; margin:4px;">
<p> <input type="checkbox" onchange="cambiaGrupo(this)" unchecked/> TODOS / NINGUNO</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk1</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk2</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk3</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk4</p>
</div>

<div style="border:solid 1px black; margin:4px;">
<p> <input type="checkbox" onchange="cambiaGrupo(this)" unchecked /> TODOS / NINGUNO</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk1</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk2</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk3</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk4</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk5</p>
</div>

<div style="border:solid 1px black; margin:4px;">
<p> <input type="checkbox" onchange="cambiaGrupo(this)" unchecked/> TODOS / NINGUNO</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk1</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk2</p>
<p> <input type="checkbox" onchange="checkFather(this)" unchecked/> chk3</p>
</div>



<script>

function cambiaGrupo(chk) {
var padreDIV=chk;
while( padreDIV.nodeType==1 && padreDIV.tagName.toUpperCase()!="DIV" )
padreDIV=padreDIV.parentNode;
//ahora que padreDIV es el DIV, cogeremos todos sus checkboxes
//Guardo en un array los checklist que están seleccionados
var padreDIVinputs=padreDIV.getElementsByTagName("inpu t");
for(var i=0; i<padreDIVinputs.length; i++) {
if( padreDIVinputs[i].getAttribute("type")=="checkbox" )
padreDIVinputs[i].checked = chk.checked;

}
}
//Con el while vamos mirando cada padre, a ver si tiene de etiqueta DIV, y cuando la tenga paramos, así ya tenemos el DIV y sólo queda recoger los checkboxes hijos.


function checkFather(chk){
var padreDIV=chk;
while(padreDIV.nodeType==1 && padreDIV.tagName.toUpperCase()!="DIV" )
padreDIV=padreDIV.parentNode;

//ahora que padreDIV es el DIV, cogeremos todos sus checkboxes
var padreDIVinputs=padreDIV.getElementsByTagName("inpu t");
var contadorCheck;

for(var i=0; i<padreDIVinputs.length; i++) {
if( (padreDIVinputs[i].getAttribute("type")=="checkbox") && (padreDIVinputs[i].checked){
contadorCheck++;
}else if( (padreDIVinputs[i].getAttribute("type"=="checkbox") && (!padreDIVinputs[i].checked){
contadorCheck--;
}
}
// Si el número de checkbox seleccionados es el mismo que checkbox existentes sin contar el padre, entonces tengo que seleccionar el padre
if ( contadorCheck == padreDIVinputs.length ){
//alert("Entro en contadorCheck");
padreDIVinputs[0].checked = true;
}

// Si el número de checkbox no seleccionados es el mismo que los existentes en el grupo sin contar el padre, entonces tengo que des-seleccionar el padre
else if ( contadorCheck == 0){
//alert("Entro en contadorUnCheck")
padreDIVinputs[0].checked = false;
}

}


</script>



He probado bastantes cosas pero no doy con la solución, creo que lo estoy complicando demasiado...

¿Me podrías orientar un poco?
Muchísimas gracias, me has sido de gran ayuda.

[derkenuke]

Hola de nuevo:

Creo que con contadores es una manera complicada de hacerlo, ya que tenemos los checkbox ahí y solo tenemos que comprobar su propiedad checked. He variado el HTML para que sea un poco más correcto, y el script depende bastante de él, así que habría que amoldarlo a cada caso. De todas maneras esto es sólo un ejemplo de cómo se podría hacer:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
 
</style>
</head>
 
<body>
 
<form>
    <fieldset>
        <legend><label> <input type="checkbox" onclick="cambiaGrupo(this)" />TODOS / NINGUNO</label></legend>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk1</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk2</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk3</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk4</label>
    </fieldset>
 
    <fieldset>
        <legend><label> <input type="checkbox" onclick="cambiaGrupo(this)" />TODOS / NINGUNO</label></legend>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk1</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk2</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk3</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk4</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk5</label>
    </fieldset>
 
    <fieldset>
        <legend><label> <input type="checkbox" onclick="cambiaGrupo(this)" />TODOS / NINGUNO</label></legend>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk1</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk2</label>
        <label> <input type="checkbox" onclick="verSiEstanTodosChecked(this)" /> chk3</label>
    </fieldset>
</form>
 
 
<script>
 
function cambiaGrupo(chk) {
    var padreFIELDSET=chk;
    while( padreFIELDSET.nodeType==1 && padreFIELDSET.tagName.toUpperCase()!="FIELDSET" )
        padreFIELDSET=padreFIELDSET.parentNode;
    // cogeremos todos sus checkboxes
    var padreFIELDSETinputs=padreFIELDSET.getElementsByTagName("input");
    for(var i=0; i<padreFIELDSETinputs.length; i++) {
        if( padreFIELDSETinputs[i].getAttribute("type")=="checkbox" )
            padreFIELDSETinputs[i].checked = chk.checked;
    }
}
 
function verSiEstanTodosChecked(chk) {
    var padreFIELDSET=chk;
    while( padreFIELDSET.nodeType==1 && padreFIELDSET.tagName.toUpperCase()!="FIELDSET" )
        padreFIELDSET=padreFIELDSET.parentNode;
    var padreFIELDSEThijos=padreFIELDSET.childNodes;
    for(var i=0, chk, todosChecked=true; i<padreFIELDSEThijos.length && todosChecked==true; i++) {
        if( padreFIELDSEThijos[i].nodeType === 1 &&                                // Tiene que ser un nodo tipo HTML, no texto
            padreFIELDSEThijos[i].tagName.toUpperCase() != "LEGEND" &&            // No puede estar dentro de un LEGEND 
            padreFIELDSEThijos[i].hasChildNodes() &&                            // Tiene que tener hijos (el checkbox)
            (chk=padreFIELDSEThijos[i].getElementsByTagName("input")[0]) &&        // Seleccionamos al hijo input como chk
            chk.getAttribute("type")=="checkbox" &&                                // chk tiene que ser efectivamente un checkbox
            chk.checked==false                                                    // y tiene que estar no seleccionado
            ) {
            todosChecked = false;
        }
    }
    // Si están todos checked tenemos que activar el primer checkbox hijo
    // Si no están todos checked tenemos que desactivar el primer checkbox hijo
    padreFIELDSET.getElementsByTagName("input")[0].checked = todosChecked     
}
 
</script> 
 
 
</body>
</html> 
  

La condicional de dentro de verSiEstanTodosChecked() es bastante compleja, se simplificaría bastante la función si asumimos que el checkbox para seleccionar todos los check va a estar el primero dentro del fieldset, podría quedar así:

Código PHP:

  function verSiEstanTodosChecked(chk) {
    var padreFIELDSET=chk;
    while( padreFIELDSET.nodeType==1 && padreFIELDSET.tagName.toUpperCase()!="FIELDSET" )
        padreFIELDSET=padreFIELDSET.parentNode;
    var padreFIELDSETinputs=padreFIELDSET.getElementsByTagName("input");
    for(var i=1, marcoElGeneral=true; i<padreFIELDSETinputs.length && marcoElGeneral==true; i++) {            // empiezo de 1 para no mirar el primero
        if( padreFIELDSETinputs[i].getAttribute("type")=="checkbox" &&
            padreFIELDSETinputs[i].checked == false
        )
        marcoElGeneral = false;
    }
    padreFIELDSET.getElementsByTagName("input")[0].checked = marcoElGeneral;
} 
   

Como ya te he dicho, depende mucho de la estructura HTML que quieras montarte. Yo la he hecho con LABEL y FIELDSET porque me parece correcto, pero me ha complicado el script un poco.


Espero que mi mensaje te aclare.

Saludos

PD: Te recomiento usar el BBCODE para mostrar código. Las etiquetas [ php ] colorean según sintaxis y a mi me parecen cómodas para leer. Usa cualquiera, PHP, HTML, CODE... pero no pegues el código sin más o será complicado leerlo.

[esthercita]

Muchísimas gracias.
Voy a mirarlo ahora mismo.

Gracias otra vez!