Is there a way to call a function whenever a checkbox is ticked in jstree? I have the following example and would like to call the function "getImages" whenever a checkbox in the tree is ticked plus I want to collect all ticked checkboxes inside this function. Any idea how to do this?
$('#container').jstree({
"core": {
"themes":{ "icons":false },
'data' : [
{
"text" : "Root",
"children" : [
{ "id": 1, "text" : "Item A", "state" : { "opened" : true }, "children" : [ { "id": 11, "text" : "A-1"}, { "id": 12, "text" : "A-2"} ] },
{ "id": 2, "text" : "Item B" }
]
}
]
},
"checkbox" : {
"keep_selected_style" : false
},
"plugins" : [ "checkbox", "wholerow" ]
}
).on('ready.jstree', function(){ $(this).jstree('open_all') });
function getImages() {
// get all the id of all ticked checkboxes
}
from [https://stackoverflow.com/a/35508809/8195985][1]
My own Test:
$(function () {
$('#container').jstree({
"core": {
"themes":{ "icons":false },
'data' : [
{
"text" : "Root",
"children" : [
{ "text" : "Item A", "state" : { "opened" : true }, "children" : [ "A-1", "A-2" ] },
{ "text" : "Item B" }
]
}
]
},
"checkbox" : {
"keep_selected_style" : false
},
"plugins" : [ "checkbox", "wholerow" ]
}
).on('ready.jstree', function(){ $(this).jstree('open_all') });
function getImages() {
console.log('ok');
}
$("#container").bind("changed.jstree",
function (e, data) {
//alert("Checked: " + data.node.id);
getImages();
//alert(JSON.stringify(data));
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<div id="container">test</div>