Checkbox parents childs arborescence

Version imprimable

Bonjour voila j'ai une fonction qui m'affiche mon arborescence :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
function getCategories( $childs, $newsSubject) {
    foreach( $childs as $key => $child) {
        echo '<li><input id="child['.$child['subjectId'].']" name="subject[]" onclick="uncheck('.$child['subjectId'].', '.$child['parentId'].')" value="'.$child['subjectId'].'" type="
CHECKBOX" '.(isset($newsSubject[($child['subjectId'])])?'checked="checked"':'').'><label for="child['.$child['subjectId'].']" id="lab['.$child['subjectId'].']">'.$child['name'].'</lab
el>'."\n";
        if( isset( $child['childs'])) {
            echo '<ul>';
            getCategories( $child['childs'], $newsSubject);
            echo '</ul>';
        }
        echo '</li>';
    }
}

et dans le template j'ai ca :

Code:

1
2
3
4
5
6
7
8
9
10
 
<script>
    list_childs = Array(<?=array2js($category['childs'])?>);
</script>
 
<form action="?" method="post">
    <ul class="checklist">
        <? getCategories( $category['childs'], $newsSubject) ?>
    </ul>
</form>

je souhaite 2 choses :
Lorsque je coche un child je veux que ca décoche le parent et le parent du parent .
et également lorsque je coche un parent que ca décoche tout ses childs
et lorsque je coche quelques choses ca se mette en rouge

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
47
48
49
 
function uncheck(subject_id, parent_id)
{
    if(parent_id != 0) uncheckParent(parent_id);
    else uncheckChilds(subject_id);
}
 
function uncheckParent(parent_id)
{
    if(parent_id!=0 && document.getElementById('child['+parent_id+']') && document.getElementById('child['+parent_id+']').checked == true)
        document.getElementById('child['+parent_id+']').checked = false;
}
 
function uncheckChilds(subject_id)
{
    all = list_childs[0];
    for(id in all)
    {
        if(all[id]['subjectId'] == subject_id && typeof all[id]['childs'] != "undefined")
        {
            for(child_id in all[id]['childs'])
            {
                temp_id = all[id]['childs'][child_id]['subjectId']
                document.getElementById('child['+temp_id+']').checked = false;
            }
        }
    }
}
 
function dump(obj)
{
    text = '';
    for(id in obj)
        if(typeof obj[id] == "object") text += "\n"+id+" : "+dump(obj[id]);
        else text += id+" : "+obj[id]+"\n";
    return text;
}
 
function makeViewCheck(obj)
{
    if(typeof obj['childs'] != "undefined")
    {
        for(id in obj['childs']) makeViewCheck(obj['childs'][id]);
    }
    else if(document.getElementById('child['+obj['subjectId']+']').checked)
    {
        document.getElementById('lab['+obj['subjectId']+']').style.color = "red";
    }
}

23/05/2008, 10h08
Matthieu2000

problème?erreur?
23/05/2008, 10h12
marty499

j'aimerai faire une seul fonction "itemClick " qui serait dans mon onclick qui se présenterai comme ca itemClick(id,ListeParent,Listeenfants)
et pour pour l'id tu cherches et tu décoches les parents si il y a , et les enfants si il y a .
mais j'arrive pas
23/05/2008, 11h53
le_chomeur

je viens de regarder ton "alogo" :

Citation:

Lorsque je coche un child je veux que ca décoche le parent et le parent du parent .
et également lorsque je coche un parent que ca décoche tout ses childs

tu ne fais nulle part mention de multi enfants ?

sinon , utilise simplement des boutons radio :aie:

si ... tu vois ici l'enfant a un enfant...

Code:

1
2
3
4
5
 
<ul><li><input id="child[11]" name="subject[]" onclick="itemClick(11)" value="11" type="checkbox"><label for="child[11]" id="lab[11]">rubChild</label>
</li></ul></li><li><input id="child[2]" name="subject[]" onclick="itemClick(2)" value="2" type="checkbox"><label for="child[2]" id="lab[2]">TEST 2</label>
<ul><li><input id="child[4]" name="subject[]" onclick="itemClick(4)" value="4" checked="checked" type="checkbox"><label for="child[4]" id="lab[4]">sous cat</label>
<ul><li><input id="child[5]" name="subject[]" onclick="itemClick(5)" value="5" checked="checked" type="checkbox"><label for="child[5]" id="lab[5]">toto</label>

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
47
48
49
50
51
52
53
54
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<script type="text/javascript">
function uncheckParent(idParent,me){
	var listeParent = document.getElementById(idParent).getElementsByTagName('input');
	for(var i = 0 , l = listeParent.length; i < l ; i++){
		if(listeParent[i].type =="checkbox"){
			listeParent[i].checked = "";
		}
	}
	me.checked = "checked";
}
 
function uncheckChild(me){
	var listeParent = me.parentNode.getElementsByTagName('input');
	for(var i = 0 , l = listeParent.length; i < l ; i++){
		if(listeParent[i].type =="checkbox"){
			listeParent[i].checked = "";
		}
	}
	me.checked = "checked";
}
</script>
</head>
 
<body>
<ul>
	<li id="menu"><input type="checkbox" onclick="uncheckChild(this);" /> MENU 
	<ul>
	<li id="menu1"><input type="checkbox" onclick="uncheckParent('menu',this);uncheckChild(this);" /> Menu 1
		<ul>
			<li><input type="checkbox" onclick="uncheckParent('menu1',this);uncheckChild(this);" />ss menu1</li>
			<li><input type="checkbox" onclick="uncheckParent('menu1',this);uncheckChild(this);" />ss menu2</li>
			<li><input type="checkbox" onclick="uncheckParent('menu1',this);uncheckChild(this);" />ss menu3</li>
			<li><input type="checkbox" onclick="uncheckParent('menu1',this);uncheckChild(this);" />ss menu4</li>
		</ul>
	</li>
	<li id="menu2">Menu 2
		<ul>
			<li><input type="checkbox" onclick="uncheckParent('menu2',this);uncheckChild(this);" />ss menu1</li>
			<li><input type="checkbox" onclick="uncheckParent('menu2',this);uncheckChild(this);" />ss menu2</li>
			<li><input type="checkbox" onclick="uncheckParent('menu2',this);uncheckChild(this);" />ss menu3</li>
			<li><input type="checkbox" onclick="uncheckParent('menu2',this);uncheckChild(this);" />ss menu4</li>
		</ul>
	</li>
 
	</ul>
	</li>
</ul>
</body>
</html>

un truc du genre , a modifier pour ne pas décocher les éléments du même niveau :)