tree menu, checking / uncheching all child items, any help please ?

kigoobe

Jan 25th 2008, 11:44 am

Hi, I'm trying to create a javascript function that will check / uncheck checkboxes associated with a multilevel tree menu. I've uploaded the page in www.kigoobe.com/debug/lagrange/debug.php where the menu is created using php.

As you see now, when we click a menu, not all / none of its child menus are getting checked / unchecked. In somd cases, check boxes are not even clickable.

The function as it is now -

------------------------------------------------
function getChildren(id) {
var children = [];
for (var i=1;i <= menuArray.length; i++) {
var parentid = menuArray[i];
if (parentid == id) {
children.push(i);
children.concat(getChildren(i));
var obj=document.getElementById("veh_"+id);
obj.checked = (obj.checked == true) ? false : true;
}
}
return children;
}
---------------------------------------------------------

Thanks for any help.

joebert

Jan 25th 2008, 3:14 pm

This could be written to better work with other script, but it covers the concept you seme to be having trouble with right now.

<html>
<head>
<title>Title</title>
<script type="text/javascript">
var make_checkboxes_clickable = function()
{
var cbs = document.getElementsByTagName('input');
for(var i=0; i<cbs.length; i++)
{
if(cbs[i].type != 'checkbox')
{
continue;
}
cbs[i].onclick = function()
{
var state = this.checked;
var subs = this.parentNode.getElementsByTagName('input');
for(var cb=0; cb<subs.length; cb++)
{
if(subs[cb].type == 'checkbox')
{
subs[cb].checked = state;
}
}
}
}
}
window.onload = make_checkboxes_clickable;
</script>
</head>
<body>
<ul>
<li><input type="checkbox" name="proto"/> One
<ul>
<li><input type="checkbox" name="proto"/> One-One
<ul>
<li><input type="checkbox" name="proto"/> One-One-One</li>
<li><input type="checkbox" name="proto"/> <input type="text" value="One-One-Two"/></li>
<li><input type="checkbox" name="proto"/> One-One-Three</li>
</ul>
</li>
<li><input type="checkbox" name="proto"/> One-Two</li>
<li><input type="checkbox" name="proto"/> One-Three</li>
</ul>
</li>
<li><input type="checkbox" name="proto"/> Two
<ul>
<li><input type="checkbox" name="proto"/> Two-One</li>
<li><input type="checkbox" name="proto"/> Two-Two</li>
<li><input type="checkbox" name="proto"/> Two-Three</li>
</ul>
</li>
</ul>
</body>
</html>