TUTORIELS 
Sélectionner un ensemble de cases d'un seul clic en Javascript
Existe-t-il une fonction simple me permettant, lorsque je clique sur une case spécifique, de sélectionner/déselectionner un ensemble de cases de mon formulaire HTML ?  (23 octobre 2003)
 

Discutez en sur les forums
"Existe-t-il une fonction simple me permettant, lorsque je clique sur une case spécifique, de sélectionner/déselectionner un ensemble de cases de mon formulaire HTML ?"

Un problème, une interrogation ? Adressez vous à la rédaction de JDNet Développeurs

Il faut, pour parvenir à ce résultat, nommer les cases sur lesquelles la "case maîtresse" doit agir, par incrément. Par exemple, case1, case2, case3..., ou select-1, select-2, select-3. Après, il suffit de créer une simple fonction qui bouclera de case en case, déclenchée par un évènement onClick sur la case maîtresse... (voir également le tutoriel : Comment utiliser jQuery pour vérifier la propriété checked d’une case à cocher ?). Le script profitera d'être étendu à plusieurs endroits, par exemple faire en sorte que cliquer sur toutes les cases sélectionne automatiquement la case maîtresse. On peut aussi imaginer que le fait de sélectionner la case maîtresse inverse la sélection des cases : l'utilisateur peut ainsi sélectionner une case, puis cliquer sur la case maîtresse pour sélectionner toutes les cases sauf celle qu'il avait cliqué...

Le code
<html>
<head>
<script language="JavaScript"><!--
function clicTous(form,booleen)
  {
  for (i=0, n=form.elements.length; i<n; i++)
  if (form.elements[i].name.indexOf('case') != -1)
    form.elements[i].checked = booleen;
  }
//--></script>

</head>

<body>
  <form name="formulaire">
    <input type="checkbox" onClick="if (this.checked) { clicTous(this.form,true) } else { clicTous(this.form,false) };"> Sélection/déselection globale<br>
    <input type="checkbox" name="case1">1<br>
    <input type="checkbox" name="case2">2<br>
    <input type="checkbox" name="case3">3<br>
    <input type="checkbox" name="case4">4<br>
    <input type="checkbox" name="case5">5<br>
    <input type="checkbox" name="case6">6<br>
    <input type="checkbox" name="case7">7<br>
    <input type="checkbox" name="case8">8<br>
    <input type="checkbox" name="case9">9
  </form>
</body>
</html>

Un problème, une interrogation ? Adressez vous à la rédaction de JDNet Développeurs
 
[ Xavier BorderieJDNet]
 
Accueil | Haut de page