checkboxes et fieldsets

Version imprimable

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

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

Salut,

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

Code:

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

08/10/2009, 18h19
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 :ccool:

Pour info voici mon code final et fonctionnel :

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