Comment créer une case à cocher « Sélectionner tout » qui contrôle d'autres cases à cocher ?

Comment implémenter une case à cocher qui sélectionne toutes les autres cases à cocher

L'implémentation d'une case à cocher "Sélectionner tout" en HTML vous permet de basculer facilement la case sélectionnée état de plusieurs autres cases à cocher sur la page.

Solution :

Pour obtenir cette fonctionnalité :

1. Créez une balise de script avec ce qui suit Code JavaScript :

<script>
function toggle(source) {
  const checkboxes = document.getElementsByName('foo');
  for (let i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = source.checked;
  }
}
</script>

2. Dans votre document HTML, ajoutez le code suivant pour créer une case à cocher "Sélectionner tout" :

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

3. Ajoutez le code suivant pour vos cases à cocher individuelles :

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

Lorsque vous cliquez sur la case à cocher "Sélectionner tout", le script parcourra toutes les cases à cocher portant le nom "foo" et définira leur propriété cochée pour correspondre à l'état coché de la case « Sélectionner tout ».

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!