domenica 20 novembre 2011

Selezionare tutti i checkbox con javascript

Molto spesso si ha bisogno di selezionare tutti i checkbox dentro un form. Come l'esempio mostrato qui:

Seleziona/Deseleziona tutto

Linguaggi di programmazione:
Java
C++
C#

Questo semplice esempio è stato realizzato con l'aiuto di una funzione javascript. La funzione utilizzata è semplice:
 <script type="text/javascript">   
  var selezionato=false;   
  function seleziona(f) {   
   if (selezionato == false){   
    selezionato = true;   
    }   
   else{   
   selezionato = false;   
   }// per ogni elemento della form si selezioniamo/deselezioniamo i checkbox   
   for (var i = 0; i < f.elements.length; i++)   
   {   
   f.elements[i].checked = selezionato;   
   }   
  }   
  </script>   
  <form>   
  <input type="checkbox" id="selezionaTutto" onclick="seleziona(this.form)">Seleziona/Deseleziona tutto   
  <br>   
  <br>   
  Linguaggi di programmazione:   
  <br>   
  <input type="checkbox" id="chb1">Java   
  <br>   
  <input type="checkbox" id="chb2">C++   
  <br>   
  <input type="checkbox" id="chb2">C#   
  </form>   
Nella funzione è presente la variabile selezione in cui si memorizza lo stato precedente dei checkbox. Con l'evento onclick dell'elemento checkbox selezionaTutto invochiamo la nostra funzione, che cambia il valore della variabile selezionato da false a true o viceversa, e poi imposta lo stato di ogni elemento checkbox presente nella form.