Get checked nodes in a jsTree

Question

I have a working JSTree based on JSON data, and the checkbox plugin displays boxes next to each item -- so far so good. Now I want to get which nodes the user has checked, so I can do something with the data.

Unfortunately I haven't found a way to do it through the documentation or web searches. A few answers on SO say to use a get_checked method, but either I'm really missing something or my version of JSTree doesn't have that (i.e. that string doesn't appear anywhere in the project files). I'm on version 3.0.0, which is the latest right now.

Could someone please point me either to a) how to get the checked items, or b) how to access some iterable representation of the tree so I can grab them myself?

(I should mention I'm pretty new to Javascript.)

Here is how I set up the tree, which is based on the documentation on the website:

var treeInit = { core: { data : [
       /* all my data */
    ] 
}};
treeInit.plugins = ["checkbox"];
$('tree_div').jstree(treeInit);

You're right - the jsTree documentation is sub-par and frustrating - have a look here: http://stackoverflow.com/questions/18268306/how-to-get-checked-nodes-in-jquery-jstree?rq=1 or http://stackoverflow.com/questions/9544820/trying-to-get-a-list-of-checked-items-on-change-state-in-jstree?rq=1 — scrowler, Jan 24 '14 at 00:21
possible duplicate of [How to get checked nodes in jquery jstree](http://stackoverflow.com/questions/18268306/how-to-get-checked-nodes-in-jquery-jstree) — scrowler, Jan 24 '14 at 00:22
@scrowler Those answers use `get_checked`, which as I mention in the question, doesn't work for me and I don't even think the current version has it (unless I'm doing something wrong). — Ari, Jan 24 '14 at 00:25
I hear ya. This answer **defines** a function called `get_all_checked`: http://stackoverflow.com/a/11219704/2812842 — scrowler, Jan 24 '14 at 00:26
... and this answer isn't using these functions at all: http://stackoverflow.com/a/6312488/2812842 (common factor here is do some searching on SO yourself) — scrowler, Jan 24 '14 at 00:28
@scrowler I've seen those as well. The problem with the ones that use jQuery selection is that it only works if the tree is fully open. If you check some children and then collapse the parent node, they're removed from the DOM, so jQuery doesn't return them. — Ari, Jan 24 '14 at 16:08
I'm not sure that's correct. Hidden yes, not removed from DOM. Can you reference that? — scrowler, Jan 24 '14 at 19:04

score 9 · Answer 1 · answered Mar 19 '14 at 07:40

9

I have also faced the same problem with jstree version 3.0.0 . I found a simple solution after hours of surfing. Hope it help others.

var result = $('#your_tree').jstree('get_selected');

This line returns an array of selected values.

answered Mar 19 '14 at 07:40

Santosh Bhardwaj

123
9

I had the same problem, the jsTree documentation has both methods, and most of the information on the web uses get_checked, this would not work for me (just return the whole tree DOM object) but get_selected works fine. On the jsTree demo site both methods work! – Josh Oct 18 '14 at 01:50

score 1 · Accepted Answer · answered Jan 25 '14 at 21:13

I found an answer. By calling $('#tree').jstree('get_json'), you can get a JSON representation of the whole tree. From there it's pretty straight forward to recurse through the tree nodes and grab all the checked ones. Again, this is for version 3.0.0 (since it seems that the API has changed a lot across versions).

score 0 · Answer 3 · answered Nov 02 '19 at 18:12

Using 3.3.8 version of jsTree, my prefered way of getting it as below using get_selected: Please remember, it only counts those nodes that are selected, it won't count any indeterminate nodes. For complete and working sample code, you can have view https://everyething.com/Example-of-jsTree-to-get-all-checked-nodes

$('.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
            });

Get checked nodes in a jsTree

3 Answers3

Linked