Comment implémenter une case à cocher « Sélectionner tout » en HTML ?

Implémentation d'une case à cocher "Sélectionner tout" en HTML

Dans le développement Web, il est courant de rencontrer des situations où les utilisateurs doivent sélectionner plusieurs éléments à partir d'une liste. Une solution polyvalente pour simplifier ce processus consiste à implémenter une case à cocher « Sélectionner tout ». Lorsqu'elle est cochée, cette case doit sélectionner automatiquement toutes les autres cases de la page.

Solution JavaScript

Pour obtenir cette fonctionnalité, vous pouvez utiliser JavaScript. Voici un extrait de code qui démontre l'implémentation :

function toggle(source) {
  checkboxes = document.getElementsByName('foo');
  for (var i = 0, n = checkboxes.length; i < n; i++) {
    checkboxes[i].checked = source.checked;
  }
}

Intégration HTML

Incorporez la fonction JavaScript dans votre code HTML comme suit :

<input type="checkbox" onClick="toggle(this)" /> Toggle All<br />

<input type="checkbox" name="foo" value="bar1" /> Bar 1<br />
<input type="checkbox" name="foo" value="bar2" /> Bar 2<br />
<input type="checkbox" name="foo" value="bar3" /> Bar 3<br />
<input type="checkbox" name="foo" value="bar4" /> Bar 4<br />

Comportement fonctionnel

Lorsque la case "Tout basculer" est cochée, toutes les autres cases seront cochées. Décocher cette case désélectionnera toutes les autres cases. Cela permet aux utilisateurs de sélectionner ou désélectionner rapidement plusieurs éléments en un seul clic.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!