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!

Recherchez-vous un expert WordPress ou WooCommerce sur qui vous pouvez compter? Ne cherchez plus.

Faites confiance à mon expertise »

Articles conseillés :

Matt

Matt Biscay est développeur WordPress et WooCommerce certifié chez Codeable, ainsi que sysadmin qualifié et enseignant-chercheur. Passionné par le code performant et les solutions sécurisées, je m'efforce d'offrir une expérience utilisateur exceptionnelle sur chaque projet.

Vous avez aimé cet article ? Vous avez un projet en tête et vous pensez que je pourrais vous aider à le concrétiser ? N'hésitez pas à me contacter, je serais ravi de discuter avec vous de votre projet !

Opinions