Ver Mensaje Individual
  #8 (permalink)  
Antiguo 02/09/2008, 10:58
esthercita
 
Fecha de Ingreso: septiembre-2008
Mensajes: 3
Antigüedad: 15 años, 8 meses
Puntos: 0
Respuesta: seleccionar grupos de checkbox

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.