Forums

<div id="treeDiv">
   <ul>
      <li><span><input type="checkbox" value="1" id="data_1" name="data[]" /> <label>Fruits, Vegetables</label></span>
         <ul>
            <li><span><input type="checkbox" value="2" id="data_2" name="data[]" /> <label>Vegetables</label></span></li>
         <li><span><input type="checkbox" value="3" id="data_3" name="data[]" /> <label>Fruits</label></span>
            <ul>
               <li><span><input type="checkbox" value="4" id="data_4" name="data[]" /> <label>Apple</label></span></li>
            </ul>
         </li>
         </ul>
      </li>
   </ul>
</div>

//The function that does everything
function fixCheck(e, o) {
   YAHOO.util.Event.stopPropagation(e);
   
   o.toggleHighlight();
   
   for (var i in tree._nodes) {
      if (tree._nodes[i].highlightState) {
         YAHOO.util.Dom.get(tree._nodes[i].contentElId).getElementsByTagName('input')[0].checked = true;
      } else if (!tree._nodes[i].highlightState) {
         YAHOO.util.Dom.get(tree._nodes[i].contentElId).getElementsByTagName('input')[0].checked = false;
      }
   }
}

//Create the TreeView
var tree = new YAHOO.widget.TreeView("treeDiv");
//Set every node to Html type
tree.setNodesProperty('type', 'Html');
//Propagate highlighting (you can enable/disable it as you like, eg. I don't enable highlight down)
tree.setNodesProperty('propagateHighlightDown', false);
tree.setNodesProperty('propagateHighlightUp', true);
//I use this, you might not (expanding everything and killing the collapse/expand events)
tree.expandAll();
tree.subscribe('collapse', function() { return false; });
tree.subscribe('expand', function() { return false; });
//Render :)
tree.render();

//Loop through all the nodes and add an onClick event
for (var i in tree._nodes) {
   YAHOO.util.Event.addListener(YAHOO.util.Dom.getFirstChild(YAHOO.util.Dom.get(tree._nodes[i].contentElId)), "click", fixCheck, tree._nodes[i]);
}