Mixed checkboxes

Mixed two state checkboxes

Check item
UnCheck item
Show item's checkbox
Hide item's checkbox
Disable checkbox
Enable checkbox
Check branch
UnCheck branch
Get list of checked


Mixed three state checkboxes

Check item
UnCheck item
Show item's checkbox
Hide item's checkbox
Disable checkbox
Enable checkbox
Get list of checked
</> Source
<!DOCTYPE html>
<!--pro-->
<html>
<head>
	<title>Mixed checkboxes</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
	<link rel="stylesheet" type="text/css" href="../common/demo_style.css"/>
	<script>
		var myTree, myTree2;
		function doOnLoad(){
			myTree = new dhtmlXTreeObject("treeboxbox_tree","100%","100%",0);
			myTree.setImagePath("../../../skins/web/imgs/dhxtree_web/");
			myTree.enableCheckBoxes(1);
			myTree.load("../common/tree_mixed.xml");
			myTree2 = new dhtmlXTreeObject("treeboxbox_tree2","100%","100%",0);
			myTree2.setImagePath("../../../skins/web/imgs/dhxtree_web/");
			myTree2.enableCheckBoxes(1);
			myTree2.enableThreeStateCheckboxes(true);
			myTree2.load("../common/tree_mixed.xml");
		}
	</script>
</head>
<body onload="doOnLoad()">
	<h1>Mixed checkboxes</h1>
	<table>
		<tr>
			<td valign="top">
				<div id="treeboxbox_tree" class="tree_demo_samples"></div>
			</td>
			<td style="padding-left:25" valign="top">
				Mixed two state checkboxes<br>
				<br>
				<a href="javascript:void(0);" onclick="myTree.setCheck(myTree.getSelectedItemId(),true);">Check item</a><br>
				<a href="javascript:void(0);" onclick="myTree.setCheck(myTree.getSelectedItemId(),false);">UnCheck item</a><br>
				<a href="javascript:void(0);" onclick="myTree.showItemCheckbox(myTree.getSelectedItemId(),true);">Show item's checkbox</a><br>
				<a href="javascript:void(0);" onclick="myTree.showItemCheckbox(myTree.getSelectedItemId(),false);">Hide item's checkbox</a><br>
				<a href="javascript:void(0);" onclick="myTree.disableCheckbox(myTree.getSelectedItemId(),true);">Disable checkbox</a><br>
				<a href="javascript:void(0);" onclick="myTree.disableCheckbox(myTree.getSelectedItemId(),false);">Enable checkbox</a><br>
				<a href="javascript:void(0);" onclick="myTree.setSubChecked(myTree.getSelectedItemId(),true);">Check branch</a><br>
				<a href="javascript:void(0);" onclick="myTree.setSubChecked(myTree.getSelectedItemId(),false);">UnCheck branch</a><br>
				<a href="javascript:void(0);" onclick="alert(myTree.getAllChecked());">Get list of checked</a><br><br>
			</td>
		</tr>
		<tr>
		<td>
		<br/>
		</td>
		</tr>
		<tr>
			<td valign="top">
				<div id="treeboxbox_tree2" class="tree_demo_samples"></div>
			</td>
			<td style="padding-left:25px" valign="top">
				Mixed three state checkboxes<br>
				<br>
				<a href="javascript:void(0);" onclick="myTree2.setCheck(myTree2.getSelectedItemId(),true);">Check item</a><br>
				<a href="javascript:void(0);" onclick="myTree2.setCheck(myTree2.getSelectedItemId(),false);">UnCheck item</a><br>
				<a href="javascript:void(0);" onclick="myTree2.showItemCheckbox(myTree2.getSelectedItemId(),true);">Show item's checkbox</a><br>
				<a href="javascript:void(0);" onclick="myTree2.showItemCheckbox(myTree2.getSelectedItemId(),false);">Hide item's checkbox</a><br>
				<a href="javascript:void(0);" onclick="myTree2.disableCheckbox(myTree2.getSelectedItemId(),true);">Disable checkbox</a><br>
				<a href="javascript:void(0);" onclick="myTree2.disableCheckbox(myTree2.getSelectedItemId(),false);">Enable checkbox</a><br>
				<a href="javascript:void(0);" onclick="alert(myTree2.getAllChecked());">Get list of checked</a><br>
			</td>
		</tr>
	</table>
</body>
</html>

Documentation

Check documentation to learn how to use the components and easily implement them in your applications.