0

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
}

JS Fiddle example

user3515612
  • 149
  • 1
  • 1
  • 11

1 Answers1

1

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>
Pv-Viana
  • 632
  • 7
  • 25
  • Thanks a lot. This works fine. I get all ticked checkboxes of the tree with "data.selected". Is it possible to get all ticked checkboxes if there are 2 jsTrees on the page (lets say "container" and "container_2")? If yes, how can I do this within a function e.g. "getAllCheckboxes()"? – user3515612 Jan 17 '18 at 10:28
  • @user3515612 yeah, you only needs select two elements with jquery $("#container,#container_2").bind("... – Pv-Viana Jan 17 '18 at 10:49
  • @ PV-Viana: It doesn't work. "data.selected" will contain only the checkboxes of the tree where I tick a checkbox. Let's say: If I tick a checkbox of "container_1" than "data.selected" only contains the clicked checkboxes within tree "container_1". It does not contain the ticked checkboxes from "container_2". If I tick a checkbox of "container_2" than "data.selected" only contains the clicked checkboxes within tree "container_2" - the ticked checkboxes from tree "container_1" are missing. – user3515612 Jan 18 '18 at 08:05
  • Cool! glad for you. I answered the main question ? – Pv-Viana Jan 19 '18 at 19:34