Forum d'entraide PHPFrance

Bonjour,
nouvellement utilisateur de javascript rencontre un problème avec deux groupes de checkbox comme suit:

Le premier:

Code : Tout sélectionner

<TABLE border=0 align="center" height="96">
<TR>
<TD><INPUT TYPE="checkbox" name="choice1[]" value=1/></TD>
<TD>Tout Paris</TD>
<TD><INPUT TYPE="checkbox" name="choice2[]" value=2/></TD>
<TD nowrap> Paris Centre</TD>
<TD><INPUT TYPE="checkbox" name="choice3[]" value=3/></TD>
<TD nowrap> Paris Est</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="choice4[]" value=4/></TD>
<TD nowrap> Paris Ouest</TD>
<TD><INPUT TYPE="checkbox" name="choice5[]" value=5/></TD>
<TD nowrap> Paris Nord</TD>
<TD><INPUT TYPE="checkbox" name="choice6[]" value=6/></TD>
<TD nowrap> Paris Sud</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="choice7[]" value=7/></TD>
<TD nowrap> Hors Paris</TD>
<TD><INPUT TYPE="checkbox" name="choice8[]" value=8/></TD>
<TD nowrap> Null</TD>
</TR>
</TABLE>

Le deuxième :

Code : Tout sélectionner

<TABLE border=0 align="center" height="50">
<TR>
<TD><INPUT TYPE="checkbox" name="arr1" id="arr1" value=1/></TD>
<TD> 1er</TD>
<TD><INPUT TYPE="checkbox" name="arr5" id="arr5" value=5/></TD>
<TD> 5&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr9" id="arr9" value=9/></TD>
<TD> 9&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr13" id="arr13" value=13/></TD>
<TD> 13&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr17" id="arr17" value=17/></TD>
<TD> 17&egrave;me</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="arr2" id="arr2" value=2/></TD>
<TD> 2&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr6" id="arr6" value=6/></TD>
<TD> 6&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr10" id="arr10" value=10/></TD>
<TD> 10&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr14" id="arr14" value=14/></TD>
<TD> 14&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr18" id="arr18" value=18/></TD>
<TD> 18&egrave;me</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="arr3" id="arr3" value=3/></TD>
<TD> 3&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr7" id="arr7" value=7/></TD>
<TD> 7&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr11" id="arr11" value=11/></TD>
<TD> 11&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr15" id="arr15" value=15/></TD>
<TD> 15&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr19" id="arr19" value=19/></TD>
<TD> 19&egrave;me</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="arr4" id="arr4" value=4/></TD>
<TD> 4&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr8" id="arr8" value=8/></TD>
<TD> 8&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr12" id="arr12" value=12/></TD>
<TD> 12&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr16" id="arr16" value=16/></TD>
<TD> 16&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr20" id="arr20" value=20/></TD>
<TD> 20&egrave;me</TD>
</TR>
</TABLE>

les checkbox sont dans le même form je voudrai sélectionner exemple Tout paris du premier & que dans le deuxième tout les arrondi soit sélectionné j'ai fait plusieurs test mais pas de réussite
Merci pour l'aide

Bonjour, j'ai une solution expliquée :

Il faut écrire une fonction javascript qui sélectionne tous les checkbox des arrondissements de paris quand on clique sur le checkbox "tout paris".

Pour ce faire, on place sur le checkbox "tout paris" un événement "onClick" qui peut déclencher la dite fonction de sélection si ce checkbox est activé (checked). Cela s'écrirait:

Code : Tout sélectionner

<TD><INPUT TYPE="checkbox" name="choice1" value="1" onClick="if (this.checked) selection_tout_paris();" /></TD>

Dans le "if" le mot réservé "this" indique l'objet sur lequel le code javascript s'exécute, en l'occurrence il s'agit du checkbox "tout paris". Donc, ce if teste si le checkbox est activé avant d'appeler la fonction dite "selection_tout_paris()" qu'on va écrire par la suite et qui doit, elle, faire la sélection automatique de tous les arrondissements de paris.

Voici donc cette fameuse fonction:

Code : Tout sélectionner

      
       // activer les checkbox's des arrondissements de paris de 1 à 20
	for (i=1; i<=20; i++)
	{
		var un_checkbox = document.getElementById('arr'+i); 
		un_checkbox.checked = true;
	}

Dans ce code une boucle "For" génère des valeurs allant de 1 à 20 pour une variable "i" car on a 20 arrondissements à traiter. Ce "i" servira à faire une concaténation avec le mot "arr" pour trouver le bon nom (id) d'un checkbox désignant un arrondissement.
Une fois un checkbox est pointé par la méthode "getElementById" on peut le manipuler en modifiant ses propriétés. Ici, on change simplement la propriété "checked" à "true" pour sélectionner le checbox. Dans le cas inverse, on pourrait affecter "false" à la propriété "checked" pour dé-sélectionner le checkbox.

Remarque: En parlant de l'effet inverse de la sélection des arrondissement, je précise, qu'il faut absolument le faire pour forcer la désactivation automatique des arrondissements dans le cas où la case "tout paris" est déactivée. Pour ce faire, il faut ajouter cet effet inverse dans l'événement "onClick" qu'on a déjà programmé en ajoutant un "else" au "if" qui conditionne le traitement.

Voici comment, donc, réaliser globalement ce mécanisme :

Code : Tout sélectionner

<script type="text/javascript">
function selection_tout_paris()
{
 // cette fonction va sélectionner tous les arrondissements de paris
	
	// activer les checkbox's des arrondissements de paris de 1 à 20
	for (i=1; i<=20; i++)
	{
		var un_checkbox = document.getElementById('arr'+i);
		un_checkbox.checked = true;
	}
}
function deselection_tout_paris()
{
 // cette fonction va désélectionner tous les arrondissements de paris
	
	// désactiver les checkbox's des arrondissements de paris de 1 à 20
	for (i=1; i<=20; i++)
	{
		var un_checkbox = document.getElementById('arr'+i);
		un_checkbox.checked = false;
	}
}
</script>
<TABLE border=0 align="center" height="96">
<TR>
<TD><INPUT TYPE="checkbox" name="choice1" value="1" onClick="if (this.checked) selection_tout_paris(); else deselection_tout_paris();" /></TD>
<TD>Tout Paris</TD>
<TD><INPUT TYPE="checkbox" name="choice2" value="2"/></TD>
<TD nowrap> Paris Centre</TD>
<TD><INPUT TYPE="checkbox" name="choice3" value="3"/></TD>
<TD nowrap> Paris Est</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="choice4" value="4"/></TD>
<TD nowrap> Paris Ouest</TD>
<TD><INPUT TYPE="checkbox" name="choice5" value="5"/></TD>
<TD nowrap> Paris Nord</TD>
<TD><INPUT TYPE="checkbox" name="choice6" value="6"/></TD>
<TD nowrap> Paris Sud</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="choice7" value="7"/></TD>
<TD nowrap> Hors Paris</TD>
<TD><INPUT TYPE="checkbox" name="choice8" value="8"/></TD>
<TD nowrap> Null</TD>
</TR>
</TABLE>

<TABLE border=0 align="center" height="50">
<TR>
<TD><INPUT TYPE="checkbox" name="arr1" id="arr1" value="1"/></TD>
<TD> 1er</TD>
<TD><INPUT TYPE="checkbox" name="arr5" id="arr5" value="5"/></TD>
<TD> 5&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr9" id="arr9" value="9"/></TD>
<TD> 9&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr13" id="arr13" value="13"/></TD>
<TD> 13&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr17" id="arr17" value="17"/></TD>
<TD> 17&egrave;me</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="arr2" id="arr2" value="2"/></TD>
<TD> 2&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr6" id="arr6" value="6"/></TD>
<TD> 6&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr10" id="arr10" value="10"/></TD>
<TD> 10&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr14" id="arr14" value="14"/></TD>
<TD> 14&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr18" id="arr18" value="18"/></TD>
<TD> 18&egrave;me</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="arr3" id="arr3" value="3"/></TD>
<TD> 3&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr7" id="arr7" value="7"/></TD>
<TD> 7&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr11" id="arr11" value="11"/></TD>
<TD> 11&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr15" id="arr15" value="15"/></TD>
<TD> 15&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr19" id="arr19" value="19"/></TD>
<TD> 19&egrave;me</TD>
</TR>
<TR>
<TD><INPUT TYPE="checkbox" name="arr4" id="arr4" value="4"/></TD>
<TD> 4&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr8" id="arr8" value="8"/></TD>
<TD> 8&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr12" id="arr12" value="12"/></TD>
<TD> 12&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr16" id="arr16" value="16"/></TD>
<TD> 16&egrave;me</TD>
<TD><INPUT TYPE="checkbox" name="arr20" id="arr20" value="20"/></TD>
<TD> 20&egrave;me</TD>
</TR>
</TABLE>

Dernière remarque:
Il faut que tu mettes en minuscule toutes les balises que tu as mis en majuscule pour répondre au standard xHTML.

Forum d'entraide PHPFrance

checkbox javascript

checkbox javascript