Cocher/décocher une liste de cases à cocher (checkbox)

Partons d'un simple formulaire :
<form method="post" name="monform" id="monform" action="#"> 
Choix 1<input name="Choix[]" value="1" type="checkbox"><br/>
Choix 2<input name="Choix[]" value="2" type="checkbox"><br/>
Choix 3<input name="Choix[]" value="3" type="checkbox"><br/>
<input name="go" value="go" type="submit">
</form>
Dans ce formulaire, nous allons ajouter une case à cocher en plus permettant de sélectionner ou dé-sélectionner un ensemble de checkbox. Cette case à cocher sera associé à une fonction Javascript nommé "CocheTout" :
Cocher/décocher toutes les checkbox nommé "Choix" <input onclick="CocheTout(this, 'Choix[]');" type="checkbox"><br/>
Choix[] est le nom donné à l'ensemble des cases.
Soit :
<form method="post" name="monform" id="monform" action="#">
Cocher/décocher toutes les checkbox nommé "Choix" <input onclick="CocheTout(this, 'Choix[]');" type="checkbox"><br/>
Choix 1<input name="Choix[]" value="1" type="checkbox"><br/>
Choix 2<input name="Choix[]" value="2" type="checkbox"><br/>
Choix 3<input name="Choix[]" value="3" type="checkbox"><br/>
<input name="go" value="go" type="submit">
</form>
Passons maintenant au code de la fonction Javascript :
function CocheTout(ref, name) {
	var form = ref;
 
	while (form.parentNode && form.nodeName.toLowerCase() != 'form'){ 
		form = form.parentNode; 
	}
 
	var elements = form.getElementsByTagName('input');
 
	for (var i = 0; i < elements.length; i++) {
		if (elements[i].type == 'checkbox' && elements[i].name == name) {
			elements[i].checked = ref.checked;
		}
	}
}
Et voila, c'est tout :).
Si vous souhaitez sélectionner ou dé-sélectionner un ensemble de checkbox de nom différent, il faut simplement ajouter une checkbox tout en prenant soin de modifier le nom des cases...par exemple :
Cocher/décocher toutes les checkbox nommé "Autre" <input onclick="CocheTout(this, 'Autre[]');" type="checkbox"><br/>
Autre 4<input name="Autre[]" value="4" type="checkbox"><br/>
Autre 5<input name="Autre[]" value="5" type="checkbox"><br/>
Autre 6<input name="Autre[]" value="6" type="checkbox"><br/>
Autre 7<input name="Autre[]" value="7" type="checkbox"><br/>
Soit :
<form method="post" name="monform" id="monform" action="#">
 
Cocher/décocher toutes les checkbox nommé "Choix" <input onclick="CocheTout(this, 'Choix[]');" type="checkbox"><br/>
Choix 1<input name="Choix[]" value="1" type="checkbox"><br/>
Choix 2<input name="Choix[]" value="2" type="checkbox"><br/>
Choix 3<input name="Choix[]" value="3" type="checkbox"><br/>
 
Cocher/décocher toutes les checkbox nommé "Autre" <input onclick="CocheTout(this, 'Autre[]');" type="checkbox"><br/>
Autre 4<input name="Autre[]" value="4" type="checkbox"><br/>
Autre 5<input name="Autre[]" value="5" type="checkbox"><br/>
Autre 6<input name="Autre[]" value="6" type="checkbox"><br/>
Autre 7<input name="Autre[]" value="7" type="checkbox"><br/>
 
<input name="go" value="go" type="submit">
</form>
Tester l'exemple ci-dessous :
Cocher/décocher toutes les checkbox nommé "Choix"
Choix 1
Choix 2
Choix 3
Cocher/décocher toutes les checkbox nommé "Autre"
Autre 4
Autre 5
Autre 6
Autre 7
Voir/déposer un commentaire (0) | Signaler un problème