JavaScript: sélectionner et désélectionner toutes les cases à cocher d’un coup

Il nous arrive souvent d’avoir toutes les cases (checkboxes) d’un formulaire ou d’un tableau à cocher.

Parfois, la fonctionnalité Sélectionnez tout / Désélectionner tout n’est pas implémentée donc voici comment faire, à l’aide de JavaScript.

Cocher toutes les cases

Supposons que toutes les cases à cocher de notre tableau se nomment post[], voici comment cocher toutes les cases, en utilisant vanilla JS :

var ele=document.getElementsByName('post[]');  
for(var i=0; i<ele.length; i++){  
  if(ele[i].type=='checkbox')  
    ele[i].checked=true;  
}  Code language: JavaScript (javascript)

Décocher toutes les cases

Inversement, on peut modifier le code précédent avec checked=false si l’on souhaite décocher toutes les cases:

var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
    if(ele[i].type=='checkbox')  
      ele[i].checked=false;  
  }Code language: JavaScript (javascript)

Fonction et bouton : Sélectionner tout

Maintenant, voyons comment nous pouvons intégrer notre code dans une fonction, que nous pourrons associer à un bouton “Sélectionner tout”:

function SelectAll(){  
  var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
  if(ele[i].type=='checkbox')  
    ele[i].checked=true;  
  }  
}  Code language: JavaScript (javascript)

Et notre bouton pourra être intégré comme ceci:

<input type="button" onclick='SelectAll()' value="Select All"/>  Code language: HTML, XML (xml)

Fonction et bouton : Désélectionner tout

Et le pendant: la fonction et le bouton qui permettent de désélectionner toutes les cases à cocher:

function deSelectAll(){  
  var ele=document.getElementsByName('post[]');  
  for(var i=0; i<ele.length; i++){  
    if(ele[i].type=='checkbox')  
      ele[i].checked=false;  
  }  
}      Code language: JavaScript (javascript)

Et voici le code HTML du bouton:

<input type="button" onclick='deSelectAll()' value="Deselect All"/>  Code language: HTML, XML (xml)

J’utilise souvent le premier bout de code sans les fonctions, ni le HTML (sauf si je développe une page d’options particulière), directement dans la console JavaScript du navigateur. C’est un gain de temps considérable sur certaines pages.

Bonnes sélections!