Discussion :

[Invité]

Salut,
j'aimerai un moyen propre d'agir sur mes checkbox, qui sont regroupées dans un fieldset. Voici le code HTML :

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
<fieldset>
<legend>Numérique</legend>
 
    <fieldset class="subtreeSelect">
    <legend><input name="" type="checkbox">Hardware</legend>
        <ul>
            <li><input name="Réseau" class="checkboxSelect" type="checkbox">Réseau</li>
        </ul>
    </fieldset>
 
    <fieldset class="subtreeSelect">
    <legend><input name="" type="checkbox">Logiciel</legend>
        <ul>
            <li><input name="Appli web" class="checkboxSelect" type="checkbox">Appli web</li>
            <li><input name="IHM" class="checkboxSelect" type="checkbox">IHM</li>
        </ul>
    </fieldset>
 
</fieldset>

Ce que je souhaite :
- quand je check la checkbox d'une fieldset, qu'elle selectionne automatiquement toutes les checkoxes qui sont dans la fieldset.
- quand j'uncheck une checkbox qui est dans une fieldset, qu'elle déselectionne la checkbox de la fieldset

Et le moyen propre est de faire ça en relatif (cad pas avec des id), car mon contenu est généré dynamiquement.

Merci ;-)

[coach759]

Salut,

Tu peux faire comme cela (je n'ai pas testé mais ça devrait ressembler à ça):

Code :

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

1
2
3
4
5
 
$(":input[type='checkbox']").click(
     var fieldset=$(this).parent().parent();  //On récupère le fieldset (je ne suis pas sur du nombre de parent() qu'il faut)
         fieldset.find(":input[type='checkbox']").attr("checked", "checked"); //A tous les checkbox du fieldset on les coche
);

Voila j'espère t'avoir un peu aider.

Bonne journée

[Invité]

Effectivement je n'ai pas été assez insistant...
J'ai un peu adapté ton code mais dans l'idée c'était ça
Merci

[Invité]

Pour info voici mon code final et fonctionnel :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//unselect root checkbox
    jQuery(".checkboxSelect").change(function() {
        if(jQuery(this).attr("checked") == false)
        {
            var fieldset=jQuery(this).parent().parent().parent();
            fieldset.children("legend").children(":input[type='checkbox']").removeAttr("checked");
        }
    });
 
    //select root checkbox
    jQuery(".checkboxSelect").change(function() {
        if(jQuery(this).attr("checked") == true)
        {
            var fieldset=jQuery(this).parent().parent().parent();
            var isAllCheckboxesChecked = true;
            fieldset.find(".checkboxSelect").each(function (i) {
 
                    if(jQuery(this).attr("checked") != true)
                    {
                        isAllCheckboxesChecked = false;
                    }
            });
            if(isAllCheckboxesChecked)
            {
                fieldset.children("legend").children(":input[type='checkbox']").attr("checked","checked");
            }
        }
    });
 
    //select all checkbox
    jQuery(".subtreeSelect > legend > input:checkbox").change( function() {
        if(jQuery(this).attr("checked") == true)
        {
             var fieldset=jQuery(this).parent().parent();
             fieldset.find(":input[type='checkbox']").attr("checked", "checked");
        }
    });
 
    //unselect all checkbox
    jQuery(".subtreeSelect > legend > input:checkbox").change( function() {
        if(jQuery(this).attr("checked") == false)
        {
             var fieldset=jQuery(this).parent().parent();
             fieldset.find(":input[type='checkbox']").removeAttr("checked");
        }
    });