Cocher toutes les cases d'un formulaire

Dans les formulaires web, par exemple la liste des courriels de Gmail ou Hotmail, on voit généralement une série d'éléments à cocher et une option supplémentaire qui permet de cocher l'ensemble de la liste d'un seul coup pour nous faciliter la tâche.

Ce genre de comportement est très facile à reproduire en JavaScript, en utilisant une librairie comme Prototype ou jQuery et les sélecteurs CSS. Voici un exemple de code équivalent pour le formulaire suivant :

<form id="frm" method="post">
 <input type="checkbox" id="all" name="all" /> Tous
 <ul>
     <li><input type="checkbox" id="option1" name="options" /> Option 1</li>
     <li><input type="checkbox" id="option2" name="options" /> Option 2</li>
     <li><input type="checkbox" id="option3" name="options" /> Option 3</li>
     <li><input type="checkbox" id="option4" name="options" /> Option 4</li>
     <li><input type="checkbox" id="option5" name="options" /> Option 5</li>
 </ul>
</form>

function checkAll(){
 $$('input[type=checkbox]').without($('all')).each(
     function(e) {
         $(e.id).checked = true;
         // ou bien inverser la sélection
         // $(e.id).checked = !$(e.id).checked;
     }
 )
}

function initialize() {
 Event.observe('all', 'click', checkAll);
}

document.observe('dom:loaded', initialize);

function checkAll(){
 $('input:checkbox').not( $('#all') ).each(
     function() {
         this.checked = true;
         // ou inverser la sélection
         // this.checked = !this.checked;
     }
 )
}

function initialize() {
 $('#all').click(checkAll);
}

$(document).ready( initialize );

• jQuery utilise toujours $() car il accède aux éléments par des sélecteurs CSS. L'ID est spécifié grâce au symbole #
  
• Quant à Prototype, il utilise $ pour accéder à un ID. Pour utiliser un sélecteur avec Prototype , il faut utiliser la notation $$()
  
• l'utilisation du pseudo sélecteur dans jQuery
  
• La fonction without() de Prototype est remplacé par not() pour ne pas inclure dans la liste le checkbox "all"
  
• la fonction anonyme de Prototype reçoit un élément "e" en paramètre alors que jQuery y fait référence directement par le mot clé this
  

Tags: JavaScript