You are here

Example of jsTree to get all checked nodes

Submitted by Asif Nowaj, Last Modified on 2019-11-08

If you are looking for answer of the question how to get all checked nodes of jsTree, then you are at the right place. Often a scenario comes when user select some nodes and then based on some event like submit button to store the selection in the server. Then you want the list of checked node details to be sent to the server.

There could be different requirements of this kind, below are few kinds explained:

  1. Get all checked node when tri-state is enabled, that is, parent node check, automatically checked child nodes.
  2. Get all checked node with two states, that is, you can check parent node and child node independently.
  3. Get all undetermined nodes, that is, to get an array of all nodes whose state is "undetermined".
  4. Get all top level nodes those are checked Or get all bottom level checked nodes.

Get all checked node when tri-state enabled

The below method will only give you the checked items, not indeterminate one. For example, when a node has multiple children and you select only one then parent node shows as indeterminate state [not checked, not unchecked]. This type of nodes with indeterminate state won't be in your list for the following example.

On the other hand, when you check a node which has child nodes, those child nodes get checked automatically. Hence in the below method, your checked node list will also contain those child nodes that you didn't explicitly checked.

For simplicity, node ids are added into the node text in UI. There is a button added to see the selected node's ids.

When you click the button called "Get all checked items" in the below example, it will show the selected node's id as below:

jsTree Get All Checked Node

Complete code as below:


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree with tri-state checkbox</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node(id:ajson1)" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2(id:ajson2)" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1(id:ajson3)" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2(id:ajson4)" },
            ];

            createJSTree(jsondata);
			
			$('.btnGetCheckedItem').click(function(){
				var checked_ids = []; 
				var selectedNodes = $('#SimpleJSTree').jstree("get_selected", true);
				$.each(selectedNodes, function() {
					checked_ids.push(this.id);
				});
				// You can assign checked_ids to a hidden field of a form before submitting to the server
				$('#idshow').text(checked_ids);
			});
			
        });

        function createJSTree(jsondata) {
            $('#SimpleJSTree').jstree({
                "core": {
                    "check_callback": true,
                    'data': jsondata                    
                },
				"checkbox" : {
					"keep_selected_style" : false
				},
                "plugins": ["checkbox"]
            });
        }
		

    </script>
</head>
<body>
    <div id="SimpleJSTree"></div>
	<input class="btnGetCheckedItem" value="Get all checked items" type="button" />
	<span id="idshow"></span>
</body> 
</html>

Get all checked node that you explicitly checked, no indeterminate state

The below method will only give you the checked items that you clicked by yourself, there is no indeterminate state.

In general, when you check a node which has child nodes, those child nodes get checked automatically. Here that will not happen, you can independently check child node and parent node. Hence, your checked node list will only contain those child nodes that you explicitly checked.

For simplicity, node ids are added into the node text in UI. There is a button added to see the selected node's ids.

When you click the button called "Get all checked items" in the below example, it will show the selected node's id as below:

jsTree Get All Checked Node with Two State

Complete code as below:


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree with two-state checkbox</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node(id:ajson1)" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2(id:ajson2)" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1(id:ajson3)" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2(id:ajson4)" },
            ];

            createJSTree(jsondata);
			
			$('.btnGetCheckedItem').click(function(){
				var checked_ids = []; 
				var selectedNodes = $('#SimpleJSTree').jstree("get_selected", true);
				$.each(selectedNodes, function() {
					checked_ids.push(this.id);
				});
				// You can assign checked_ids to a hidden field of a form before submitting to the server
				$('#idshow').text(checked_ids);
			});
			
        });

        function createJSTree(jsondata) {
            $('#SimpleJSTree').jstree({
                "core": {
                    "check_callback": true,
                    'data': jsondata                    
                },
				"checkbox" : {
					 "three_state": false,
					"keep_selected_style" : false
				},
                "plugins": ["checkbox"]
				
            });
        }
		

    </script>
</head>
<body>
    <div id="SimpleJSTree"></div>
	<input class="btnGetCheckedItem" value="Get all checked items" type="button" />
	<span id="idshow"></span>
</body> 
</html>

Get all undetermined nodes

The below method will only give you only those nodes that are undetermined state, that is, this would be the list of those parent nodes where not all of its children are checked..

For simplicity, node ids are added into the node text in UI. There is a button added to see the selected node's ids.

When you click the button called "Get all checked items" in the below example, it will show the intended node's id as below:

jsTree Get All undertermined Nodes

Complete code as below:


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree with two-state checkbox</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node(id:ajson1)" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2(id:ajson2)" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1(id:ajson3)" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2(id:ajson4)" },
            ];

            createJSTree(jsondata);
			
			$('.btnGetCheckedItem').click(function(){				
				var checked_ids = []; 
				var selectedNodes = $('#SimpleJSTree').jstree("get_undetermined", true);
				$.each(selectedNodes, function() {
					checked_ids.push(this.id);
				});
				// You can assign checked_ids to a hidden field of a form before submitting to the server
				$('#idshow').text(checked_ids);
			});
			
        });

        function createJSTree(jsondata) {
            $('#SimpleJSTree').jstree({
                "core": {
                    "check_callback": true,
                    'data': jsondata                    
                },
				"checkbox" : {
					"keep_selected_style" : false
				},
                "plugins": ["checkbox"]
            });
        }
</script>
</head>
<body>
    <div id="SimpleJSTree"></div>
	<input class="btnGetCheckedItem" value="Get all checked items" type="button" />
	<span id="idshow"></span>
</body> 
</html>

Get all top level checked nodes Or bottom level checked nodes

The below method will only give you those parent nodes that are in checked state, that is, this would be the list of those parent nodes where all of its children are checked or checked but does not have any children.

For simplicity, node ids are added into the node text in UI. There is a button added to see the selected node's ids for both cases.

When you click the button called "Get all top level checked items" in the below example, it will show the intended node's id as below:

jsTree Get All Top Level Checked Nodes

When you click the button called "Get all bottom level checked items" in the below example, it will show the intended node's id as below:

jsTree Get All Bottom Level Checked Nodes

Complete code as below:


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title>Simple jsTree with top level and bottom level checked</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/themes/default/style.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.8/jstree.min.js"></script>
    <script type="text/javascript">
        $(function () {

            var jsondata = [
                           { "id": "ajson1", "parent": "#", "text": "Simple root node(id:ajson1)" },
                           { "id": "ajson2", "parent": "#", "text": "Root node 2(id:ajson2)" },
                           { "id": "ajson3", "parent": "ajson2", "text": "Child 1(id:ajson3)" },
                           { "id": "ajson4", "parent": "ajson2", "text": "Child 2(id:ajson4)" },
            ];

            createJSTree(jsondata);
			
			$('.btnGetAllTopLevelCheckedItems').click(function(){
				var checked_ids = []; 
				var selectedNodes = $('#SimpleJSTree').jstree("get_top_checked", true);
				$.each(selectedNodes, function() {
					checked_ids.push(this.id);
				});
				// You can assign checked_ids to a hidden field of a form before submitting to the server
				$('#idshow').text("Top level checked items:"+checked_ids);
			});
			
			$('.btnGetAllBottomLevelCheckedItems').click(function(){
				var checked_ids = []; 
				var selectedNodes = $('#SimpleJSTree').jstree("get_bottom_checked", true);
				$.each(selectedNodes, function() {
					checked_ids.push(this.id);
				});
				// You can assign checked_ids to a hidden field of a form before submitting to the server
				$('#idshow').text("Bottom level checked items:"+checked_ids);
			});
        });

        function createJSTree(jsondata) {
            $('#SimpleJSTree').jstree({
                "core": {
                    "check_callback": true,
                    'data': jsondata                    
                },
				"checkbox" : {
					"keep_selected_style" : false
				},
                "plugins": ["checkbox"]
            });
        }
    </script>
</head>
<body>
    <div id="SimpleJSTree"></div>
	<input class="btnGetAllTopLevelCheckedItems" value="Get all top level checked items" type="button" />
	<input class="btnGetAllBottomLevelCheckedItems" value="Get all bottom level checked items" type="button" />
	<br /><span id="idshow"></span>
</body> 
</html>

Discussion or Comment

If you have anything in mind to share, please bring it in the discussion forum here.

https://forum.everyething.com/jstree-f33/