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; } Code (javascript): --------------------------------------------------------- Thanks for any help.
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> Code (markup):