Comment créer une case à cocher « Sélectionner tout » en HTML ?

Comment sélectionner toutes les cases à cocher avec une seule case à cocher « Sélectionner tout » en HTML

Créer une case à cocher « Sélectionner tout » dans une page HTML permet la sélection pratique de plusieurs cases à cocher en un seul clic. En implémentant cette fonctionnalité, vous pouvez améliorer l'expérience utilisateur et rationaliser l'envoi de formulaires.

Pour implémenter une case à cocher « Tout sélectionner », vous pouvez utiliser JavaScript pour manipuler la propriété cochée de toutes les autres cases :

<script type="text/javascript">
  function toggleAll(source) {
    var checkboxes = document.querySelectorAll('input[type="checkbox"][name="foo"]');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = source.checked;
    }
  }
</script>

Dans ce script, la fonction toggleAll() est définie pour basculer l'état coché de toutes les cases portant le nom « foo » chaque fois que la case source (la case « tout sélectionner ») est cliqué.

Pour utiliser ce script, ajoutez simplement la case à cocher suivante à votre HTML :

<input type="checkbox" onclick="toggleAll(this)" /> Select All

Une fois intégré, cliquer sur la case à cocher "Sélectionner tout" fera désormais basculer l'état coché de tous les autres cases à cocher sur la page portant le nom « foo ». Cela offre aux utilisateurs un moyen pratique de sélectionner rapidement et facilement tous les éléments d'un formulaire.

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!