[Résolu] Javascript: cocher des checkbox en fonction de l'état d&#

[Greywolf]

Bonjour,

 

Je réalise un formulaire pour former des requêtes sur une base de données.

 

Le formulaire se présente sous la forme de listes de checkbox générées à partir de l'interrogation de la base de données pour en sortir les différentes labels. Pour faciliter l'affichage, j'ai regroupé les différentes checkbox dans des div différentes, ici trajet et section

 //connexion à la BDD
$mysql_result = mysql_query("SELECT * FROM travel;");
if ($ligne = mysql_fetch_array($mysql_result)) 
	{
	echo '<div id="trajet">';
	echo '<p>Sélectionnez un ou plusieurs types de parcours:</p>';
	echo '<table>';
	 do 
	  {
	   printf('<tr><td>%s</td><td><INPUT type="checkbox" name="trajet[]"  value="%s" id="%s" onclick="java script:checkSelect(this.id);" /></td></tr>', $ligne["travel_type"], $ligne["idtravel"], $ligne["travel_type"] );
	  } 
	 while ($ligne = mysql_fetch_array($mysql_result));
	 echo '</table>';
	 echo '</div>';
	}

[....]

$mysql_result = mysql_query("SELECT * FROM urban_section;");
if ($ligne = mysql_fetch_array($mysql_result)) 
	{
	 echo '<div id="section">';
	 echo '<p>Sélectionnez un ou plusieurs tronçons urbains: </p>';
	 echo '<table>';
	 do 
		{
		  printf('<tr><td>%s</td><td><INPUT type="checkbox" name="section[]"  value="%s" id="%s" /></td></tr>',$ligne["section_type"], $ligne["idurban_section"], $ligne["section_type"]);
		} 
	 while ($ligne = mysql_fetch_array($mysql_result));
	 echo '</table>';
	 echo '</div>';
	}

 

J'aimerais pouvoir cocher automatiquement des cases de la seconde div (section) quand des checkbox de la div trajet sont cochées. Chaque checkbox dispose d'un identifiant unique de type chaine de caractères (généré par la requête sur la BDD)

 

Jusque là, j'ai compris qu'il faut faire ça en Javascript mais j'ai jamais trop touché à cette bête.

j'ai rajouté l'évènement Onclick dans les checkbox de la section trajet pour appeler le script que j'ai bêtement appelé checkSelect avec comme argument this.id.

 

Maintenant, il me faut écrire cette fonction et je sais pas faire

 

en gros, ça devrait faire

si this.id = "chaine de caractères x" , il faut cocher les cases ayant les id x, y, z

 

y'a quelqu'un qui saurait me faire ça?

function checkSelect(elmId){
  if (elmId == "chaine1") {

 }
 else if (elmId == "chaine2") {

 }
 else if (elmId == "chaine3") {

 }
 else if (elmId == "chaine4") {

 }
}

 

comment cocher les checkbox dont les id sont toto, tata, titi ?

[Greywolf]

bon j'ai trouvé un truc qui fonctionne à peu près, y'a surement mieux mais c'est un début

else if (elmId == "chaine4") {

var checkbox1 = document.getElementById("toto");
if (!(checkbox1).checked) {
	(checkbox1).click();
  }

var checkbox1 = document.getElementById("tata");
if (!(checkbox1).checked) {
	(checkbox1).click();
  }
}

[KewlCat]

Au lieu de déclencher l'événement click() change plutôt l'attribut checked (que tu mets à true ou false), ça sera moins risqué... Enfin, tout dépend de ce que tu souhaites faire... Il faut tout cocher en cascade ??

 

Si j'étais toi, j'utiliserais une fonction qui prend en paramètre en tableau d'identifiants et qui cocherait les checkbox correspondantes, comme ça il suffirait d'appeler cette fonction avec le tableau qui va bien pour chaque else if (elmId == "...") (plus lisible)

 

(...)
else if (elmId == "chaine4") {
cocherLesCheckbox([ "toto", "tata" ]);
}

 

function cocherLesCheckbox(tabIdElements) {
for (var i = 0; i < tabIdElements.length; i++) {
	try {
		var element = document.getElementById(tabIdElements[i]);
		element.checked = true;
		// ou
		// element.click();
		// ou
		// if (!element.checked) {
		//	 element.click();
		// }
		// etc...
	} catch (ex) {
		alert("Y'a un souci avec la valeur " + tabIdElements[i] + " !");
	}
}
}

[Greywolf]

ça fonctionne bien avec la fonction cocherLesCheckbox().

 

J'ai essayé de faire une fonction decocherLesCheckbox() en remplaçant element.checked = true; par element.checked = false; pour décocher automatiquement les cases "toto" "tata" ... quand on décoche "chaine4"

 

mais force est d'avouer que je tourne en rond, j'essaie de tester l'état de l'id chaine4 et d'envoyer selon le résultat de is.checked vers l'une ou l'autre fonction mais ça ne marche pas du fait, je pense, qu'il faudrait scanner régulièrement l'état de "chaine4" le temps que la page est affichée.

 

Me trompe-je?

[KewlCat]

Je ne suis pas sûr de bien comprendre...

Scanner régulièrement ? Alors que l'on est dans un cas de programmation par événements ? (donc on sait où se brancher pour justement ne pas avoir à vérifier l'état du système à longueur de temps)

Si ton script a des soucis avec l'état des checkbox, essaie de le déclencher dans le onchange() au lieu du onclick() ...

Si tu veux décocher les mêmes cases lorsque tu décoches celle qui s'appelle "chaine4" alors il faudrait peut-être faire une fonction cocherLesCheckbox() paramétrable au lieu d'en faire deux, une qui met à true et l'autre à false...

function cocherLesCheckbox(tabIdElements, etat) {
if (etat == null) {
	etat = true; // Action par défaut si on oublie le paramètre : cocher
}
for (var i = 0; i < tabIdElements.length; i++) {
	try {
		var element = document.getElementById(tabIdElements[i]);
		element.checked = etat;
	} catch (ex) {
		alert("Y'a un souci avec la valeur " + tabIdElements[i] + " !");
	}
}
}

... et l'utiliser ainsi :

// On récupère l'état (coché, décoché) de l'élément -- booléen
var etat = document.getElementById(elmId).checked;
(...)
else if (elmId == "chaine4") {
cocherLesCheckbox([ "toto", "tata" ], etat); // On passe l'état en paramètre
}

Et puis, si tu as différentes choses à faire sur d'autres checkboxes, on peut envisager la chose suivante :

else if (elmId == "chaine4") {
cocherLesCheckbox([ "toto", "tata" ], etat); // On met ces checkboxes dans le même état que "chaine4"
cocherLesCheckbox([ "titi", "tutu", "truc" ], !etat); // On met ces checkboxes dans l'autre état
}

Ca permet de décocher certaines cases lorsque tu cliques sur "chaine4" (et que ça la coche), et inversement... automatiquement !

Modifié le 13 juillet 2007 par KewlCat
IE est tellement con (ne déclenche le onchange() des checkboxes que lors du onblur() !) que l'une des suggestions est invalide

[Greywolf]

grazie mille

 

j'avais pas les yeux en face des trous hier soir; la fonction cocherlesCheckbox() paramétrable fonctionne impec.

Je ne suis pas très à l'aise avec le javascript et les propriétés de chaque objet (et je cherche parfois midi à quatorze heures, ce qui n'arrange rien )

[tabris]

bonjour,

 

je cherche à faire à peu près la même chose que Greywolf mais je ne sais absolument pas comment passer un tableau en paramètre, comme le conseille KewlCat. que dois-je mettre dans l'appel de ma fonction ?

 

j'ai testé quelques trucs de ce genre, sans succès

 

onClick="checkSelect(["spot1","spot2","spot3","spot4","spot5]");"

ou encore

onClick="checkSelect(spot1,spot2,spot3,spot4,spot5);"

 

bref, toute aide est la bienvenue

merci d'avance !

[KewlCat]

1) si tu ne sais pas s'il te faut des guillemets ou pas, des crochets ou pas, etc. c'est que tu ne sais pas ce que tu passes en paramètre. Evite de jouer aux devinettes, réfléchis à ce que tu es en train de manipuler et à ce qu'attend la fonction que tu appelles !

2) dans on onclick=" (..) " il faut utiliser des apostrophes pour délimiter les chaines de caractère

3) ce sont des accolades et non des crochets qui déclarent les tableaux

 

Tu as implémenté exactement la même fonction checkSelect() que Greywolf ? Alors elle attend une chaine de caractères. Si tu lui passes un tableau elle risque fort de planter (tout dépend de ce que tu en fais) et si tu lui passes une liste de chaines (plusieurs paramètres) alors elle ne prendra en compte que la première...

 

Si tu es vraiment largué, montre-nous ce que tu as sur ta page et comment tu as implémenté la fonction checkSelect()

Modifié le 13 juillet 2007 par KewlCat
La remarque 3 est vraie pour du Java, or il est question de JavaScript...

[tabris]

merci pour ta réponse !

 

effectivement, je ne sais pas trop si ce sont des crochets ou des guillemets ou autres qui sont attendus. quand tu parlais de tableau d'identifiant à passer en paramètre, comment dois-je procéder ?

 

j'explique un peu ce que je compte faire :

 

<input type="checkbox" name="layer" id="spot" value="SPOT" onClick="checkSelect({spot1,spot2,spot3,spot4,spot5});" [sPOT_check]><label for="spot">SPOT</label><br />

<input type="checkbox" name="layer" id="spot1" value="SPOT1" [sPOT1_check]><label for="spot1">SPOT 1</label><br />
<input type="checkbox" name="layer" id="spot2" value="SPOT2" [sPOT2_check]><label for="spot2">SPOT 2</label><br />
<input type="checkbox" name="layer" id="spot3" value="SPOT3" [sPOT3_check]><label for="spot3">SPOT 3</label><br />
<input type="checkbox" name="layer" id="spot4" value="SPOT4" [sPOT4_check]><label for="spot4">SPOT 4</label><br />
<input type="checkbox" name="layer" id="spot5" value="SPOT5" [sPOT5_check]><label for="spot5">SPOT 5</label><br />

 

je souhaite que lorsque je coche la première case (SPOT), les cases qui seraient éventuellement cochées parmis les 5 autres soient décochées. à l'inverse, si jamais je coche une ou plusieurs cases parmis les 5 autres, il faudrait que la première se décoche si elle était cochée.

 

pour info, les éléments name et [sPOTX_check] sont destinés au CGI qui est utilisé (mapserver).

 

j'ai l'impression que j'ai mis ce qu'il faut pour chaque checkbox (id). pour le moment, j'ai testé avec la fonction que tu avais donnée qui devrait cocher les autres cases lorsque je coche la première (je sais bien que c'est l'inverse que je cherche à faire mais je voulais déjà voir si ça marchait sans rien chercher à modifier) :

 

function checkSelect(tabIdElements)
{
 for (var i = 0 ; i < tabIdElements.length ; i++)
 {
   try
   {
     var element = document.getElementsById(tabIdElements[i]);
     element.checked = true;
   }
 }
}

 

voilà, j'espère avoir été clair, n'hésitez pas à le dire si ce n'est pas le cas.

merci ^^

[KewlCat]

Ok...

quand tu parlais de tableau d'identifiant à passer en paramètre, comment dois-je procéder ?

Tu dois créer un tableau en mettant les identifiants (la valeur des attributs "id" des balises) entre guillemets ou apostrophes. Ici, tu es à l'intérieur des guillemets définissant l'attribut onclick donc tu dois utiliser des apostrophes :

<input type="checkbox" name="layer" id="spot" value="SPOT" onclick="checkSelect(['spot1', 'spot2', 'spot3', 'spot4', 'spot5']);" [SPOT_check]>

Par ailleurs, le checkSelect() ne doit s'exécuter que lorsque l'on coche cette case (parce que là, ça s'exécute systématiquement si l'on clique, quel que soit l'état de la checkbox). Donc :

<input type="checkbox" name="layer" id="spot" value="SPOT" onclick="if (this.checked) { checkSelect(['spot1', 'spot2', 'spot3', 'spot4', 'spot5']); }" [SPOT_check]>

 

Et, dans un second temps, pour décocher la case "spot" lorsque l'on coche une des autres checkbox, il faudra ajouter un onclick sur les autres checkbox pour faire "if (this.checked) { document.getElementById('spot').checked = false; }"