Cocher des éléments enfants

Version imprimable

Bonjour,

J'ai une arborescence en liste et j'aimerais cocher les éléments enfants lorsque le père est coché. Mon code HTML se présente actuellement sous la forme suivante :

J'ai tenté de faire le code JS mais il me manque des éléments pour aboutir... Je ne pense pas que children soit bien adapté dans mon cas, mais comment faire ? :? Merci.

Code:

1
2
3
4
5
6
 
$('.aco_master').click(function(){ 
    	if($('.aco_master').attr('checked') == 'checked'){
    	  $('.aco_child').children.attr("checked", "checked");
    	}
    });

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
<ul id="navigation" class="treeview">
<li class="expandable">
<div class="hitarea expandable-hitarea"></div>
<input id="AcoId73" class="aco_master" type="checkbox" value="73" name="data[Aco][id][73]">
Ajax
<ul>
<li>
<input id="AcoId74" class="aco_child" type="checkbox" value="74" name="data[Aco][id][74]">
_index
</li>
<li>
<input id="AcoId75" class="aco_child" type="checkbox" value="75" name="data[Aco][id][75]">
_edit_utilisateur
</li>
<li>
<input id="AcoId76" class="aco_child" type="checkbox" value="76" name="data[Aco][id][76]">
_list_utilisateurs
</li>
<li>
<input id="AcoId77" class="aco_child" type="checkbox" value="77" name="data[Aco][id][77]">
_save_utilisateur
</li>
</ul>
<li class=..>Blabla
<ul>...

Bonsoir

Voir : http://api.jquery.com/prop/

Code:

1
2
3
4
5
$('.aco_master').change(function(){
	if ( $(this).prop('checked') ){
		$('.aco_child').prop("checked", true);
	}
});

27/12/2011, 13h53
Bovino

Tu commets pas mal de confusions...

Code:

$('.aco_child').children.attr("checked", "checked");

C'est quoi pour toi un enfant d'une balise <input>, qui par définition n'a pas de contenu ? :koi:

Code:

if($('.aco_master').attr('checked') == 'checked')

C'est lequel d'input que tu vérifies selon toi ?
D'autre part, .attr() vérifie la valeur de l'attribut, pour vérifier si un input est coché, c'est plutôt

Code:

$('.aco_master:checked')

ou

Code:

$('.aco_master').is(':checked')

Merci pour vos réponses, voici ce que je suis arrivé à faire et qui fonctionne :ccool::

Code:

1
2
3
4
5
6
7
8
 
$('[class*="aco_master"]').change(function(){
        var aco_child_id = $(this).attr('class').substr(-1,1);
    	if ( $(this).prop('checked') ){
    		$('.aco_child_'+aco_child_id).prop("checked", true);
    	} else {
    		$('.aco_child_'+aco_child_id).prop("checked", false);
}

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<ul>
<li>
<input id="AcoId73" class="aco_master_1" type="checkbox" value="73" name="data[Aco][id][73]">
Ajax
<ul>
<li>
<input id="AcoId74" class="aco_child_1" type="checkbox" value="74" name="data[Aco][id][74]">
index
</li>
<li>
<input id="AcoId75" class="aco_child_1" type="checkbox" value="75" name="data[Aco][id][75]">
editutilisateur
</li>
<ul class="aco_master_2">...