Sélectionner checkbox en cliquant sur une ligne d'un tableau
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:
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!
