javascriptjstree

Selecting Checkbox when Selecting List Item in JSTree


I currently have a JSTree that shows up List Items with Checkboxes inside them.

My goal: Send selected list items value into PHP POST Form.

This is how I echo them on my site:

echo '<li id="dynamicID"><input name="checkboxname" type="checkbox" id="SameIdThanListItemID" value="checkboxvalue">List item text</li>

This is working fine, and my List items are showing up as intended.

We've got first the list item check, then JSTree icon, then checkbox input that I must use for a post submit (this checkbox will be hidden). The checkboxes cannot be clicked, I assume this is due to JSTree behaviour.

enter image description here

The tree is currently set up to disable multi selections, so we are not facing problems related with arrays. We will never work on more than a single ID.

The problem comes when I'm trying to get checkbox selected when the list items are clicked.

    $("#tree").bind("changed.jstree",

        function (e, data) {       

        var nodeId = $('#tree').jstree().get_selected("id")[0].id;

        // Shows up the proper ID selected, and both checkbox and 
        // list item have the same ID, so we're good untill here
        console.log(nodeId); 

        // We've got the ID properly stored into nodeId,and we've checked it with console.Log, 
        // however, the input checkbox its never getting selected.
        document.getElementById(nodeId).checked = true;

        }
    );

Solution

  • I found out that checkboxes wont be able to be checked/unchecked if they are inside the JSTree <li></li> tags.

    To fix this I just made a loop outside the tree and echoed every checkbox in a hidden div. Now selecting the list items also checks the proper checkbox, so the post submit works as intended.