Discussion :

[crazyyann]

Bonjour à tous,

soit le tableau ci dessous, les o représentant des boutons radios

Col 1	Col 2	Col 3
o "Tout cocher"	o "Tout cocher"	o "Tout cocher"
o	o	o
o	o	o

J'ai fait un petit bout de code pour cocher un bouton radio lorsque l'on clique sur la cellule du tableau le contenant. Les boutons radios de la première ligne permettent de cocher les boutons des autre lignes de la même colonne. Lorsque je clique sur la cellule de la colonne 1 contenant le bouton radio "Tout cocher" les autres boutons radio de cette colonne passent bien à l’état coché. En revanche, si je clique directement sur le bouton radio "Tout cocher", les autres boutons radio ne change pas d’état.

Pour plus de compréhension, vous pouvez jeter un œil à cette page :http://jsfiddle.net/7hp5ty3o/17/

Merci d'avance.

[Bovino]

Code :

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

if(e.target.tagName=='TD')

C'est normal, tu ne fais ton traitement que si l'élément qui a reçu le clic est la balise <td>, donc si tu cliques sur le radio, la condition n'est pas remplie et rien ne se coche.

[crazyyann]

Merci pour le coup de main.

J'ai réutilisé un bout de code que tu m'as donné il y a quelque mois.

En debuggant, je me rends compte que la condition est remplie, que je clique sur la cellule du tableau ou directement sur le bouton radio.

Du coup, si je retire le test:

Code :

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

if(e.target.tagName=='TD')

ça ne fonctionne pas mieux.

[kakashi99]

Salut,

Bovino a raison... si tu cliques sur le radio, le tagName sera "INPUT" et donc tu remplis pas la condition.
mais il n'y a pas que ça.

si tu arrives la en ayant cliqué sur le bouton radio le test suivant ne marchera pas.

Code javascript :

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

1
2
 
if(cbResultat.is(':checked')==false)

comme tu viens de sélectionner le radio ':checked' retourne "true". en gros il te faut un comportement quand tu cliques sur le radio et quand tu cliques ailleurs dans la cellule.

[danielhagnoul]

Ce n'est pas trivial. Il y a différentes manières d'aborder le problème. En jQuery :

Code HTML :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<table id="tableCocher" border="1">
    <thead>
        <tr>
            <th>Colonne 1</th>
            <th>Colonne 2</th>
            <th>Colonne 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="CellHover">
                <input class="ToutCocher" name="rbTous" type="radio" value="0" />
                tout cocher
            </td>
            <td class="CellHover">
                <input  class="ToutCocher" name="rbTous" type="radio" value="1" />
                tout cocher
            </td>
            <td class="CellHover">
                <input class="ToutCocher" name="rbTous" type="radio" value="2" />
                tout cocher
            </td>
        </tr>
        <tr>
            <td class="CellHover">
                <input name="rb_ligne2" type="radio" value="" />
            </td>
            <td class="CellHover">
                <input name="rb_ligne2" type="radio" value="" />
            </td>
            <td class="CellHover">
                <input name="rb_ligne2" type="radio" value="" />
            </td>
        </tr>
        <tr>
            <td class="CellHover">
                <input name="rb_ligne3" type="radio" value="" />
            </td>
            <td class="CellHover">
                <input name="rb_ligne3" type="radio" value="" />
            </td>
            <td class="CellHover">
                <input name="rb_ligne3" type="radio" value="" />
            </td>
        </tr>
    </tbody>
</table>

Code JavaScript :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
$( function(){ // forme abrégée de $(document).ready(function(
 
    var jObjTbody = $( "#tableCocher" ).find( "tbody" ),
        jObjRadios = jObjTbody.find( "input[type='radio']" ),
        jObjRadiosToutCocher = jObjRadios.filter( ".ToutCocher" ),
        jObjRadiosSaufToutCocher = jObjRadios.not( ".ToutCocher" ),
        jObjTrs = jObjTbody.find( "tr" ).not( ":eq(0)" );
 
    // debug, console, touche F12
    // jObjTrs ne doit pas contenir la ligne "ToutCocher"
    //console.log( jObjTrs );
 
    /*
     * Désélectionner les boutons "radio" "ToutCocher" lors
     * d'un clic sur les autres boutons "radio" 
     */
    jObjRadiosSaufToutCocher.on( 'click', function( ){
        jObjRadiosToutCocher.prop( "checked", false );
    });
 
    /*
     * Lors d'un clic sur un bouton "radio" "ToutCocher"
     */
    jObjRadiosToutCocher.on( 'click', function( ){
 
        // désélectionner tous les boutons "radio" sauf celui-ci
        jObjRadios.not( this ).prop( "checked", false );
 
        // numéro de la colonne
        var col = $( this ).val();
 
        // pour tous les TR inclus dans l'objet jObjTrs
        jObjTrs.each( function( i, itemTr ){
 
            // pour tous les TD inclus dans l'élément du DOM itemTr
            $( itemTr ).find( "td" ).each( function( j, itemTd ){
 
                // si c'est la bonne colonne
                if ( j == col ){
 
                    // sélectionner le bouton "radio"
                    $( itemTd )
                        .find( "input[type='radio']" )
                        .prop( "checked", true );
 
                }
            });
        });
 
    });
});

[crazyyann]

Merci à vous, ça fonctionne.