Onchange su CheckBox

[mosquito70]

Ciao a tutti,
scusate la banalita' della domanda ma non riesco a trovare una soluzione a questo semplice problema.

Ho 4 checkbox di cui una (la prima) e' l'opzione "tutti". Se l'utente sceglie quest'ultima, tutte le altre devono cambiare lo stato in checked true, mentre se la disabilita anche le altre devono passare tutte in stato checked false.

Ora, se questo e' chiaramente semplice e funzionante, non capisco dov'e' l'errore quando, dopo aver selezionato e deselezionato "tutti", non posso piu' selezionare singolarmente le opzioni? (cosa che posso fare se all'apertura della form non seleziono l'opzione "tutti").

Questo e' il codice

function CheckAllCountry(check,form){
    if (document.getElementById("co_0").checked){
        document.getElementById("co_56").checked=true;
        document.getElementById("co_372").checked=true;
        document.getElementById("co_724").checked=true;    
    }else if (document.getElementById("co_0").checked==false){
            document.getElementById("co_56").checked=false;
            document.getElementById("co_372").checked=false;
            document.getElementById("co_724").checked=false;
    } else {
        if(document.getElementById("co_56").checked){
                document.getElementById("co_56").checked=true;
            }else{
                document.getElementById("co_56").checked=false;
            }
            if(document.getElementById("co_372").checked){
                document.getElementById("co_372").checked=true;
            }else{
                document.getElementById("co_372").checked=false;
            }
            if(document.getElementById("co_724").checked){
                document.getElementById("co_724").checked=true;
            }else{
                document.getElementById("co_724").checked=false;
            }
    }
} 

Dov'e' il banale errore?
Grazie in anticipo.

[br1]

Togli tutta la parte da else in poi.

... ovviamente l'onchange va messo solo al primo checkbox

ciao

[Xinod]

se la funzione la richiami comunque su tutti i checkbox, l' errore e' che rientri sempre nel ramo del primo else, perche' il primo checkbox non e' segnato -> tutti i checkbox perdono il segno di spunta

[mosquito70]

Originariamente inviato da br1
Togli tutta la parte da else in poi.

... ovviamente l'onchange va messo solo al primo checkbox

ciao

Grazie della risposta, pero'
il problema e' che la "stringa" dei checkbox la costruisco in automatico e, purtroppo, il valore "tutti" e' in tabella e non posso toglierlo dalla tabella e nemmeno escluderlo dall'estrazione perche' fa parte di una classe (php) che e' comune con altri applicativi.

Insomma, dovrei trovare un modo per farlo tutto da javascript... Si puo?

questo il codice che costruisce la stringa

foreach ($aCountry as $keyCountry=>$valueCountry){
    echo "<td>$valueCountry<input type=\"checkbox\" name=\"country_$keyCountry\" id=\"co_$keyCountry\" value=\"$keyCountry\" onclick=\"CheckAllCountry(this,form)\"></td>";
} 

Chiaramente potrei fare una if nel ciclo e scrivere due echo differenti, ma non c'e' un altro modo piu' pulito?
(se non c'e' utilizzero' quest'ultima strada, con la modifica che mi hai detto)

Grazie ancora

[Xinod]

tutti ha sempre id="co_0"?

function CheckAllCountry(check,form){
  if(check.id=='co_0'){
    if (check.checked){
        document.getElementById("co_56").checked=true;
        document.getElementById("co_372").checked=true;
        document.getElementById("co_724").checked=true;    
    }else{
        document.getElementById("co_56").checked=false;
        document.getElementById("co_372").checked=false;
        document.getElementById("co_724").checked=false;
    }
  }
}

giusto per farlo funzionare, si puo' sicuramente fare meglio

[mosquito70]

Originariamente inviato da Xinod
tutti ha sempre id="co_0"?

function CheckAllCountry(check,form){
  if(check.id=='co_0'){
    if (check.checked){
        document.getElementById("co_56").checked=true;
        document.getElementById("co_372").checked=true;
        document.getElementById("co_724").checked=true;    
    }else{
        document.getElementById("co_56").checked=false;
        document.getElementById("co_372").checked=false;
        document.getElementById("co_724").checked=false;
    }
  }
}

giusto per farlo funzionare, si puo' sicuramente fare meglio

Si', "tutti" ha sempre valore 0.
L'idea finale e' quella di generalizzare i checkbox diversi da "tutti", ovvero con codice diverso da 0, in maniera di renderlo usabile per qualsiasi checkbox.

Intanto, uso quello che mi hai indicato.
Grazie mille.

Edit: Chiaramente il tuo esempio funziona perfettamente. Per generalizzarlo, pensavo di catturare il valore del checkbox

check.value 

ma dovrei passarli tutti in una sola volta, attraverso un array, e metterli a "false" o "true" a seconda dell'evenienza. Ma non ci riesco

La strada che sto seguendo e' qualcosa del tipo...

    var oForm=document.getElementById(form);
    for(var i=0;i < oForm.length; i++){
        if(oForm[i].type=="checkbox"){
....
....

        }
        } 

Se trovo la soluzione (in tempi brevi) la posto.

[mosquito70]

Che dite di una soluzione del genere.
Funziona, ma vorrei da voi, sicuramente piu' esperti di me, un consiglio se puo' andare bene cosi'

Grazie

function CheckAllCountry(check,form){
    var oForm=document.getElementById(form);
    
    for(var i=0;i < oForm.length; i++){
        if(oForm[i].type=="checkbox"){
              if(check.id=='country_0'){
                    if (check.checked){
                        document.getElementById(oForm[i].name).checked=true;
                   }else{
                        document.getElementById(oForm[i].name).checked=false;
                   }
                }
        }
    } 

se funziona, mancherebbe rendere "country_0" parametrico e valido per tutti i checkbox di tipo "tutti"

ps. Questa la parte php

foreach ($aCountry as $keyCountry=>$valueCountry){
    echo "<td>$valueCountry<input type=\"checkbox\" name=\"country_$keyCountry\" id=\"country_$keyCountry\" value=\"$keyCountry\" onclick=\"CheckAllCountry(this,'formUserProfilesNew')\"></td>";
} 

[Xinod]

puoi anche non passare form (se this e' un elemento del form, puoi parlare di this.form)

al massimo il ciclo va fatto per
for(var i=0;i < oForm.elements.length; i++){

l' if/else piu' avanti fondamentalmente non serve
riferimentoACheckbox.checked=check.checked;

di tutti i modi per riferirti ad un campo
document.getElementById(oForm[i].name)
e' il piu' fuorviante,
se cicli per gli elements del form
un elemento e' oForm.elements[i]

come identificare chi segna tutti lo puoi sapere solo tu, che conosci i dettagli della tua applicazione

[mosquito70]

Grazie per i consigli.

Ho modificato in questo modo, considerando che l'opzione "tutti", avra' una sintassi di questo tipo

NomeCheckBox_0

dove NomeCheckbox e' variabile.

function CheckAllCountry(check,form){
    var oForm=document.getElementById(form);

    for(var i=0;i < oForm.elements.length; i++){
        if(oForm[i].type=="checkbox"){
              if(check.id.indexOf("_0")>-1){
                    if (check.checked){
                        oForm.elements[i].checked=true;
                   }else{
                        oForm.elements[i].checked=false;
                   }
                }
        }
    }
} 

Il problema ora e' che se ci sono altri checkbox nella form, quando clicco su "tutti" mi
seleziona/deseleziona anche quelli che non interessano a quel determinato checkbox

Ho pensato che sia necessario inserire un nuovo paramentro nella chiamata alla funzione, del tipo

onclick="CheckAllCountry(this,'country','formUserP rofilesNew')"

e quindi di confrontrlo nel momento che metto a true/false tutti i valori.

Ma non mi funziona.
Ora vado a pranzo.
Dopo riprovo e posto il codice modificato. Se avete nel frattempo qualche idea per quest'ultimo
punto mi risparmiereste un bel po' di tempo.

Grazie ancora

[mosquito70]

Ho risolto.
Prima era la stanchezza

Se dovesse servire a qualcuno, ecco il codice

Codice php

foreach ($aCountry as $keyCountry=>$valueCountry){
   echo "<td>$valueCountry<input type=\"checkbox\" name=\"country_$keyCountry\" id=\"country_$keyCountry\" value=\"$keyCountry\" onclick=\"CheckAll(this,'country','formUserProfilesNew')\"></td>";
} 

codice javascript

function CheckAll(check,prefix,form){
    var oForm=document.getElementById(form);
    for(var i=0;i < oForm.elements.length; i++){
        if(oForm[i].type=="checkbox"){
              if(check.id.indexOf("_0")>-1){
                    if (check.checked){
                           if(oForm.elements[i].name.indexOf(prefix)>-1){
                               if(oForm.elements[i].name.indexOf("_0")>-1){
                                oForm.elements[i].checked=true;
                            } else {
                                     oForm.elements[i].disabled=true;
                                     oForm.elements[i].checked=true;
                                 }
                        }     
                   }else{
                           if(oForm.elements[i].name.indexOf(prefix)>-1){
                               oForm.elements[i].disabled=false;
                               oForm.elements[i].checked=false;
                        }     
                   }
                }
        }
    }
} 

Dove, ricordo che il checkbox tutti deve avere una sintassi del tipo NomeCheckBox_0 (dove NomeCheckBox e' variabile). Nel mio caso "country"


Una ultima richiesta
Nel caso in cui seleziono tutti, gli altri check vengono disabilitati e posti a true.
Edit: Risolto e modificato il codice di questo post

Grazie ancora per tutti i consigli e spero che questo 3D possa essere utile a qualcuno.
ciao