Discussion :

[flavors]

Bonjour,

Je suis novice en JS et je fais fasse à un problème dans une réalisation.

J'ai un tableau avec au début de chaque ligne, une checkbox.

Ce que je souhaite faire c'est lors d'un click sur une ligne, la checkbox correspondant se coche et que la ligne change de couleur(mettre en place une sélection en fait) et que lorsque j'appuie à nouveau sur cette ligne, la checkbox se desélectione et la ligne redevient blanche.

J'ai écris un code qui marche mais que pour la 1ére sélection / desélection... Après avoir desélection la ligne une première fois, si je reclique à nouveau dessus, seule la couleur change et la checkbox ne se sélectionne pas.

L'exemple qui tourne http://jsfiddle.net/Flavors/nuzo8gn2/
Le script :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<script>
//Fonction JS pour selectionner les lignes (coche la case et change la couleur
$('tr').click(function() //Lors d'un clic sur une ligne du tableau
{
	$classe = $(this).attr('class')//On recupére le nom de la classe de la ligne sur laquelle on a cliqué
	if($classe != "en_tete")//Si on clique sur l'en-tête, on ne fait rien
	{	
		$classe= "." + $classe;//On concaténe le nom de la classe récupéré pour le formaté "ligne_tableau_x" -> ".ligne_tableau_x"
		$case_a_cocher = $($classe).find("input[type=checkbox]");//On recupere l'element checkbox pour pouvoir tester sa valeur et agir sur la ligne 
 
		$test=$($case_a_cocher).is(":checked");
		alert($test);//On regarde l'etat de la checkbox
		if($($case_a_cocher).is(":checked"))//Si la case est cochée
		{	
			$($case_a_cocher).attr('checked',false);
			$($classe).css("background-color","transparent");//On change la couleur de la ligne (toute la hauteur du rowspan)
		}
		else//Si la case n'est pas cochée
		{
			$($case_a_cocher).attr('checked',true);
			$($classe).css("background-color","#e9f8ff");//On change la couleur de la ligne (toute la hauteur du rowspan)
		}
		$test=$($case_a_cocher).is(":checked");		
		alert($test);// On verifie le nouvel etat de la checkbox
	}
});
</script>

Je ne vois pas du tout d'où cela peut venir donc si quelqu'un à une idée, ce serait super simpa!

MERCI!

[Invité]

lorsque vous avez testé la valeur d'une case à cocher, vous lui affectez aussitôt la valeur opposée.
Et les couleurs sont inversées, on dirait.
Votre code corrigé :

Code js :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
				//Fonction JS pour selectionner les lignes (coche la case et change la couleur
				$('tr').click(function() //Lors d'un clic sur une ligne du tableau
				{
					$classe = $(this).attr('class')//On recupére le nom de la classe de la ligne sur laquelle on a cliqué 
					if($classe != "en_tete")//Si on clique sur l'en-tête, on ne fait rien
					{	
						$classe= "." + $classe;//On concaténe le nom de la classe récupéré pour le formaté "ligne_tableau_x" -> ".ligne_tableau_x"
						$case_a_cocher = $($classe).find("input[type=checkbox]");//On recupere l'element checkbox pour pouvoir tester sa valeur et agir dessus 
 
                        $test=$($case_a_cocher).is(":checked");//test sur la valeur de la cas
						//alert($test);
						if($($case_a_cocher).is(":checked"))//Si la case est cochée
						{	
							//$case_a_cocher.checked=false;
							//$($case_a_cocher).attr('checked',false);
							$($classe).css("background-color","#e9f8ff");//On change la couleur de la ligne (toute la hauteur du rowspan)
						}
						else//Si la case n'est pas cochée
						{
						//	$case_a_cocher.checked=true;
							//$($case_a_cocher).attr('checked',true);
							$($classe).css("background-color","transparent");//On change la couleur de la ligne (toute la hauteur du rowspan)
						}
						$test=$($case_a_cocher).is(":checked");		
						//alert($test);
					}
				});

[flavors]

Merci pour votre réponse.

Excusez moi, j'ai dû mal exposer mon problème :
Ce que je souhaite faire c'est une selection / deselection de lignes d'un tableau lors d'un clic sur celles-ci.

Donc au début, lorsque ma ligne n'est pas séléctionnée et que je clique dessus :
- Je teste voir si la checkbox est cochée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($($case_a_cocher).is(":checked"))

- si elle n'est pas cochée : je la coche et je change la couleur de la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$($case_a_cocher).attr('checked',true);
$($classe).css("background-color","#e9f8ff");

Si je clique sur une ligne déjà selectionnée :
- Je teste voir si la checkbox est cochée

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($($case_a_cocher).is(":checked"))

- si elle est cochée : je la décoche et je remet la couleur initiale de la ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
$($case_a_cocher).attr('checked',false);
$($classe).css("background-color","transparent");

Ce code fonctionne comme je veux pour un "allez-retour"... Je veux dire que lorsque:
- je selectionne une 1ere fois, ça marche (couleur : OK , checkbox : OK)
- je deselectionne , ça marche (couleur : OK , checkbox : OK)
- je selectionne à nouveau, PROBLEME ((couleur : OK , checkbox : RESTE DECOCHEE)
- A partir de là seule la couleur change.

Je viens de re-regarder lorsque je veux selectionner à nouveau une ligne apres l'avoir desectionnée une 1ere fois, le message d'alerte que j'ai mis pour tester la valeur de la checkbox me retourne "false" mais en regardant avec l'outil du navigateur (F12), j'ai bien

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <input type="checkbox" name="choix" value="1" checked="checked">

pour le checkbox de la ligne... Je ne comprend pas ...

[herch]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$('tr').click(function() {
	var classe = $(this).attr('class')
	if(classe != "en_tete") {	
		classe= "." + classe;
		var case_a_cocher = $(this).find("input[type=checkbox]");
 
		var test = $(case_a_cocher).prop("checked");
		if(test) {	
			$(case_a_cocher).prop('checked',false);
			$(classe).css("background-color","transparent");
		} else {
			$(case_a_cocher).prop('checked',true);
			$(classe).css("background-color","#e9f8ff");
		}
	}
});

[flavors]

Probléme résolu !
Il fallait remplacer :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$($case_a_cocher).attr('checked',true);

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$($case_a_cocher).prop("checked",true);

[flavors]

Merci herch.
Vous avez raison, cela à bien résolu mon probléme.

[SpaceFrog]

Plus simplement
https://jsfiddle.net/nuzo8gn2/3/

[Watilin]

Salut,

je vois que tu as résolu ton problème. Je voudrais rajouter une chose : tu te compliques la vie avec les classes. jQuery propose 4 méthodes pour manipuler les classes facilement ; et dans ton cas il y a encore plus simple car, au sein de la fonction click, tu peux accéder directement au <tr> cliqué via $(this). Il y a une coutume en jQuery qui est d'écrire l'instruction var $this = $(this); au début de la fonction, pour simplifier tout accès ultérieur au <tr>. Ainsi, tu peux remplacer $($classe).find("input[type=checkbox]") par $this.find("input[type=checkbox]"), entre autres.

Attention aussi à la déclaration de tes variables : si tu n'utilises pas var, tes variables sont accidentellement globales, ça peut causer des problèmes. En utilisant le mode strict, tu auras tout de suite une erreur qui te signale les variables non déclarées. Ouvre la console de ton navigateur (touche F12) pour voir les erreurs, ainsi que les messages envoyés avec console.log.

Autre chose, les variables en JavaScript ne commencent pas obligatoirement par $. En général, les développeurs jQuery adoptent la convention de mettre un $ quand la variable représente un objet jQuery. Dans ton code, la variable $test n'est pas un objet jQuery (c'est un booléen) dont tu devrais la renommer en test.

Au fait, JSFiddle a un bouton TidyUp, des fois c'est pratique
J'ai mis à jour ton fiddle : http://jsfiddle.net/nuzo8gn2/2/


Edit: Ah Spaffy, tu m'as grillé !

[SpaceFrog]

@Watilin
tu as comme moi au début oublié deux choses ..

les rowspan
et la propagation du click des checkbox

J'ai rectifié mon fiddle précédent .

[Watilin]

En effet

Comme je suis perfectionniste j'ai passé un peu de temps à mettre au point ma version. Je n'aime pas l'idée de devoir ajouter des classes ligne_tableau_1, etc. car je trouve que ça diminue la maintenabilité du code HTML, alors j'ai essayé de faire sans. Je me suis heurté à quelques obstacles qui m'ont obligé à recourir à de bonnes vieilles boucles while (est-ce que c'est une faiblesse de jQuery ou simplement moi qui ne connais pas assez bien ce framework ?) – bref, voici ma proposition : https://jsfiddle.net/nuzo8gn2/5/

[flavors]

Bonjour et merci à vous.

Salut,
Attention aussi à la déclaration de tes variables : si tu n'utilises pas var, tes variables sont accidentellement globales, ça peut causer des problèmes.

Je ne le savais pas (il est vrai que je connais peu de choses pour l'instant><, mais ça va venir).

Je ne connaissais pas non plus le TidyUp. Je tacherai de m'en servir.