Ver Mensaje Individual
  #9 (permalink)  
Antiguo 02/09/2008, 15:20
Avatar de derkenuke
derkenuke
Colaborador
 
Fecha de Ingreso: octubre-2003
Ubicación: self.location.href
Mensajes: 2.665
Antigüedad: 21 años, 4 meses
Puntos: 45
Respuesta: seleccionar grupos de checkbox

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==&& padreFIELDSET.tagName.toUpperCase()!="FIELDSET" )
        
padreFIELDSET=padreFIELDSET.parentNode;
    
// cogeremos todos sus checkboxes
    
var padreFIELDSETinputs=padreFIELDSET.getElementsByTagName("input");
    for(var 
i=0i<padreFIELDSETinputs.lengthi++) {
        if( 
padreFIELDSETinputs[i].getAttribute("type")=="checkbox" )
            
padreFIELDSETinputs[i].checked chk.checked;
    }
}

function 
verSiEstanTodosChecked(chk) {
    var 
padreFIELDSET=chk;
    while( 
padreFIELDSET.nodeType==&& padreFIELDSET.tagName.toUpperCase()!="FIELDSET" )
        
padreFIELDSET=padreFIELDSET.parentNode;
    var 
padreFIELDSEThijos=padreFIELDSET.childNodes;
    for(var 
i=0chktodosChecked=truei<padreFIELDSEThijos.length && todosChecked==truei++) {
        if( 
padreFIELDSEThijos[i].nodeType === &&                                // 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==&& padreFIELDSET.tagName.toUpperCase()!="FIELDSET" )
        
padreFIELDSET=padreFIELDSET.parentNode;
    var 
padreFIELDSETinputs=padreFIELDSET.getElementsByTagName("input");
    for(var 
i=1marcoElGeneral=truei<padreFIELDSETinputs.length && marcoElGeneral==truei++) {            // 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.
__________________
- Haz preguntas inteligentes, y obtendrás más y mejores respuestas.
- Antes de postearlo Inténtalo y Búscalo.
- Escribe correctamente tus mensajes.