"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 dune 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
|