Checkboxes

Checkboxes

This JavaScript tree has checkbox system in order to use this component as a navigation bar with selection lists. Besides usual two-state checkboxes (checked item, unchecked item), there is a possibility to use three state checkboxes with "partly-checked" value (some sub-items are checked). To test any of these functionalities you should select an item in a tree and then click on an appropriate action link.

	Two state checkboxes Check item UnCheck item Check branch UnCheck branch Get list of checked
	Three state checkboxes Check item UnCheck item Get list of checked

Source

<link rel="STYLESHEET" type="text/css" href="../../codebase/dhtmlxtree.css">
<script  src="../../codebase/dhtmlxcommon.js"></script>
<script  src="../../codebase/dhtmlxtree.js"></script>
 
 
<table>
    <tr>
        <td valign="top">
            <div id="treeboxbox_tree" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;"></div>
        </td>
        <td  style="padding-left:25" valign="top">
        Two state checkboxes<br><br>
        <a href="javascript:void(0);" onClick="tree.setCheck(tree.getSelectedItemId(),true);">Check item</a><br><br>
        <a href="javascript:void(0);" onClick="tree.setCheck(tree.getSelectedItemId(),false);">UnCheck item</a><br><br>
        <a href="javascript:void(0);" onClick="tree.setSubChecked(tree.getSelectedItemId(),true);">Check branch</a><br><br>
        <a href="javascript:void(0);" onClick="tree.setSubChecked(tree.getSelectedItemId(),false);">UnCheck branch</a><br><br>
        <a href="javascript:void(0);" onClick="alert(tree.getAllChecked());">Get list of checked</a><br><br>
        </td>
    </tr>
    <tr>
        <td valign="top">
            <div id="treeboxbox_tree2" style="width:250px; height:218px;background-color:#f5f5f5;border :1px solid Silver;; overflow:auto;"></div>
        </td>
        <td  style="padding-left:25" valign="top">
            Three state checkboxes<br>
            <br>
        <a href="javascript:void(0);" onClick="tree2.setCheck(tree2.getSelectedItemId(),true);">Check item</a><br><br>
        <a href="javascript:void(0);" onClick="tree2.setCheck(tree2.getSelectedItemId(),false);">UnCheck item</a><br><br>
        <a href="javascript:void(0);" onClick="alert(tree2.getAllChecked());">Get list of checked</a><br><br>
        </td>
    </tr>
</table>    
<script>tree = new dhtmlXTreeObject("treeboxbox_tree", "100%", "100%", 0);
tree.setSkin('dhx_skyblue');
tree.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree.enableCheckBoxes(1);
tree.loadXML("../common/tree3.xml");
tree2 = new dhtmlXTreeObject("treeboxbox_tree2", "100%", "100%", 0);
 
tree2.setSkin('dhx_skyblue');
tree2.setImagePath("../../codebase/imgs/csh_bluebooks/");
tree2.enableCheckBoxes(1);
tree2.enableThreeStateCheckboxes(true);
tree2.loadXML("../common/tree3.xml");</script>