Seleziona/Deseleziona tutti i checkbox di un menù

[Kujo]

Vi incollo direttamente la discussione dall'altro forum:

Originariamente inviato da Kujo
Dunque io ho una lista di "opzioni" con relativo checkbox da spuntare (il menù è dinamico, quindi il numero di voci dipende da una tabella su un DB e viene creato con la lettura di un oggetto Recordset in un ciclo while): è possibile in asp creare un link/bottone che permetta di selezionare tutte le opzioni o deselezionarle tutte o devo usare javascript?

Potete darmi qualche indicazione o linkarmi qualcosina di facile e veloce?

Possibilmente preferirei far tutto in asp, ma non so se è possibile: fatemi sapere, grazie!

http://forum.html.it/forum/showthrea...readid=1259077

Sto facendo un lavoro in asp, ma ho necessità di creare questa funzione e mi han detto di venire qui.
Considerate che non ho proprio dimestichezza con JS quindi trattatemi come un cretino ^^;
Grazie in anticipo.

[artorius]

Immagino tu abbia una serie di checkbox con lo stesso name in modo che sia sequenziale (ad es name="check[]"), allora puoi associare l'evento onclick di un altro checkbox con una funzione che modifica i checkbox con un ciclo for.

Ora mi spiego:

Metti di avere il seguente HTML:

    Check/Uncheck All: <input type="checkbox" onclick="checkUncheck(this)" />
</p>
<form name="form" action="" method="post">
    


        <input type="checkbox" name="check[]" />
    </p>
    


        <input type="checkbox" name="check[]" />
    </p>
    


        <input type="checkbox" name="check[]" />
    </p>
    


        <input type="checkbox" name="check[]" />
    </p>
    


        <input type="checkbox" name="check[]" />
    </p>
    


        <input type="checkbox" name="check[]" />
    </p>
    


        <input type="checkbox" name="check[]" />
    </p>
    


        <input type="checkbox" name="check[]" />
    </p>
</form> 

Nota che il checkbox che sta in cima ha una proprietà chiamata onclick. Quello è l'evento, sostanzialmente dice "quando clicchi su questo input attiva quella funzione Javascript". Ci sono altri eventi, che sono altrettanto utili, ma al fine della discussione ti serve questo.

Ora andiamo a creare la funzione checkUncheck:

function checkUncheck(check)
{            
    var checks = document.getElementsByName('check[]');
    for(i = 0; i < checks.length; i++)
    {    
        checks[i].checked = check.checked;                
    }
} 

Questa funzione prende in ingresso come parametro un Element, ovvero un oggetto che rappresenta un TAG della pagina.

La funzione in questo caso otterrà l'elemento chiamante, ovvero il checkbox su cui andiamo a cliccare.

La prima cosa che fa è utilizzare una funzione dell'elemento document, che rappresenta tutta la pagina HTML, chiamata getElementsByName, che ritorna un Array (collezione di oggetti) contenente tutti gli Elementi che hanno name = al paramentro passato (in questo caso il nome dei checkbox).

Sull'array, faccio un ciclo for (una iterazione, c'è anche in asp), e, per ogni elemento dell'array setto la proprietà checked (proprietà dei checkbox che indica se sono selezionati) al valore che il checkbox che vado a cliccare assume.

Spero di essere stato chiaro.

P.S. Questa funzione la devi mettere in un tag <script type="text/javascript"></script> nell'head della pagina.

[Kujo]

Perfetto, provo subito.
Mille grazie!
Solo una domanda: la propietà onclick posso settarla anche su un bottone o cmq su qualsiasi altro "input type"?

[Mitttico]

Invece se uno ha tutti i checkbox con nomi diversi??

Io per esempio li ho chiamati 1 2 3 4 5 ....

[artorius]

@Kujo
l'EVENTO onclick si verifica su tutti, mi sembra, gli Elementi delle form (input, textarea, select, button) e si traduce in quando con il mouse fai click e rilasci subito il bottone, con il cursore sull'elemento, fai questa funzione.

@Mitttico
Per favore, cambia quei nomi, è una cosa che manda in palla JS. Per il resto, fevi fare una funzione un po' diversa:

function checkUncheck(check)
{            
    var checks = document.getElementsByTagName('input');
    for(i = 0; i < checks.length; i++)
    {    
        if(checks[i].type.toUpperCase() == 'CHECKBOX')
            checks[i].checked = check.checked;                
    }
} 

N.B. Questa va bene anche per il caso di Kujo, ma è meno utilizzabile, dato che fa tutti i checkbox, senza distinzione per nome.