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 :

//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
    }
});

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

MERCI!

4 réponses


Azorgh
Réponse acceptée

Content que tu ai pu avancer x)
Pour marquer en "Résolu", il faut sélectionner la / les réponses qui t'ont aidés.

Pourquoi force tu l'attribut checked sur les checkbox ? La personne vient de cliquer dessus, et tu veux lui forcer un état ? Pas logique.

J'ai rapidement modifié le code : https://jsfiddle.net/4LmmLczz/
Je te laisse voir si ça te convient, et au cas échant comparer pour comprendre ;)

Bonne continuation!

Rovalf
Auteur

Merci pour votre réponse.

Je suis désolé, je me rends compte que mon explication n'est pas trés claire. En fait les checkbox sont la juste pour sauvegarder l'état (selectionné / non selectionné) de la ligne sur laquelle ils se trouvent. Je ne veux pas activer les checkboxs en cliquant dessus mais en cliquant sur la ligne sur laquelle ils sont. je vais rapidement décrire les étapes :

  • Je clique une 1ere fois n'importe où sur une ligne du tableau (sauf sur la checkbox) -> la couleur change et la checkbox est cochée.
  • Je clique une 2nd fois sur cette même ligne -> la couleur reviens à la normale et la checkbox est décochée.
  • Je clique à nouveau sur cetteligne -> la couleur change mais la checkbox reste desélectionnéé... alors que je voudrais qu'elle se selectionne à nouveau.

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]input type="checkbox" name="choix" value="1" checked="checked"[/code] pour le checkbox de la ligne... Je ne comprend pas .

Je suis allé sur votre lien mais c'est le même code que j'avais placé. Peut-être avez-vous oublié de sauvegarder?

Rovalf
Auteur

Probléme résolu !
Il fallait remplacer :

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

par

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

Je vois qu'il y une coche verte à côté de certaines discussions, j'imagine que c'est pour la marqué comme étant résolue.
Je ne voie pas de bouton à cet effet, donc désolé si ce n'est pas marqué en résolu><.