Checkbox state

[movie4]

Hello, try separate click on checkbox and click on name of leaf

Add checkbox for each leaf in tree

  ...
  onCreateLi: function(node, $li) {

  var item = $li.find('.jqtree-title');

  // Add checkbox to item
  var itemCheckbox = $('<input />')
        .attr({ type: 'checkbox',
                name: 'selected_item',
                value: node.list_of_pk })
        .addClass('jqtree-checkbox');
  item.before(itemCheckbox);
  ...

Then add click event

itemCheckbox.on('click', function(event) {
  event.preventDefault();
  event.stopPropagation()
  if($tree.tree('isNodeSelected', node)) {
    console.log('remove');
    $(this).prop('checked', false);
    $tree.tree('removeFromSelection', node);
  } else {
    console.log('add');
    $(this).prop('checked', true);
    $tree.tree('addToSelection', node);
  }
});

and add tree.click event

$tree.bind('tree.click', function(event) {
  console.log('click');
});

When click on checkbox, event is triggered but the checkbox state does not change.

[mbraak]

You can use the tree.click event to handle the click of the checkbox:

    $tree.bind('tree.click', function(event) {
        if ($(event.click_event.target).is('.jqtree-checkbox')) {
            event.preventDefault();
            var node = event.node;

            if($tree.tree('isNodeSelected', node)) {
                console.log('remove');
                $(this).prop('checked', false);
                $tree.tree('removeFromSelection', node);
            } else {
                console.log('add');
                $(this).prop('checked', true);
                $tree.tree('addToSelection', node);
            }
        }
    });

[movie4]

Thanks a lot!