Comment implémenter la fonctionnalité de case à cocher « Sélectionner tout » en HTML ?

Implémentation de la fonctionnalité de case à cocher « Sélectionner tout » en HTML

Un défi courant dans le développement HTML consiste à permettre la sélection simultanée de plusieurs cases à cocher en utilisant une case à cocher "Sélectionner tout". Cette fonctionnalité permet aux utilisateurs de basculer facilement et efficacement l'état de toutes les cases à cocher.

Pour implémenter la case à cocher « Sélectionner tout », une fonction JavaScript peut être utilisée. La fonction doit parcourir toutes les cases à cocher et définir leur propriété cochée sur la valeur de la case à cocher « Sélectionner tout ». Voici un extrait de code illustrant cette approche :

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

Pour intégrer cette fonctionnalité dans votre code HTML, ajoutez une case à cocher supplémentaire intitulée "Tout basculer" ou "Sélectionner tout" avec un gestionnaire d'événements onClick qui appelle la fonction toggle(). fonction. Pour chaque case à cocher qui doit être affectée, attribuez le même nom (par exemple, "foo") à son attribut de nom.

<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/>

En suivant ces étapes, vous pouvez ajouter la fonctionnalité de case à cocher "Sélectionner tout" à votre Page HTML, améliorant l'expérience utilisateur et simplifiant le processus de sélection.

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!