The way to spruce up a Checkbox Item List into a Tree format in Oracle APEX.

apex-tree-checkbox.js

/*!
 * apex-tree-checkbox. The way to spruce up a Checkbox Item List into a Tree format in Oracle APEX.
 *
 * Copyright (c) 2014 J. Reuben Wetherbee
 * http://jrweth.com
 *
 * Licensed under MIT
 * http://www.opensource.org/licenses/mit-license.php
 *
 * Launch  : October 2014
 * Version : 1.0.1
 * Released: Thursday 23rd October, 2014
 * 
 * Description: 
 * This javascript library is used in conjunction with Oracle Aplication Express (Apex 4.2)
 * to add checkboxes to a Tree Region in order to enable the user to
 * make selections at the various levels of the tree and sync the selections with a 
 * hidden page item.
 * 
 * Usage:
 * - Include this code in your page by editing the page and including it in the
 *   "Javascript Function and Global Variable Declaration" or in the "Javascript File URLs
 * - Create a hidden item (e.g. P100_EMPLOYEES) 
 * - Create a new "Tree" region and make sure the defining 
 *   query returns the desired uniquely identifying id for the innermost tree items
 * - Assign a static_id in the Tree Region "Attributes" section (e.g. EMPLOYEE_TREE)
 * - Link the Tree and Item by adding the following to the page javascript "Execute when Page Loads"
 *   or a dynamic action set to run when the page loads:
 *       apexTreeCheckbox.init('#[TREE_STATIC_ID]','#[ITEM_ID]')
 *       (e.g.) apexTreeCheckbox.init('#EMPLOYEE_TREE', '#P100_EMPLOYEE_CHECKBOX');
 */


(function (apexTreeCheckbox, $) {
    "use strict";

    //function which checks to see if all children tree items are checked then check the parent
    apexTreeCheckbox.setParentCheckboxes = function (treeDomSelector) {
        $(treeDomSelector + ' li:not(.leaf)>input.apexTreeCheckbox').each(function () {
            var $this = $(this);
            if ($this.parent().find('li.leaf>input.apexTreeCheckbox:not(:checked)').size() === 0) {
                $this.prop('checked', true);
            }
        });
    };

    //sync tree with item
    apexTreeCheckbox.syncTreeWithItem = function (treeDomSelector, itemDomSelector) {
        var selectedItems = $(itemDomSelector).val().split(":");
        
        //loop through each check box and see if it is checked
        $(treeDomSelector + ' input.apexTreeCheckbox').each(function () {
            var $this = $(this);
            if (selectedItems.indexOf($this.attr('data-tree_id')) >= 0) {
                $this.prop('checked', true);
            }
            else {
                $this.prop('checked', false);
            }
        });
        apexTreeCheckbox.setParentCheckboxes(treeDomSelector);
    };
    
    //sync item with tree
    apexTreeCheckbox.syncItemWithTree = function (treeDomSelector, itemDomSelector) {
        var ids = [];
        //loop through each check box and see if it is checked
        $(treeDomSelector + ' li.leaf>input.apexTreeCheckbox:checked').each(function (index) {
            ids[index] = $(this).attr('data-tree_id');
        });
        $(itemDomSelector).val(ids.join(":"));
        console.log('set ' + itemDomSelector + " to " + ids.join(":"))
    };
    
    
    //initialize the checkbox tree and bind to the item
    apexTreeCheckbox.init = function (treeDomSelector, itemDomSelector) {

        //create all the checkboxes for each tree item
        $(treeDomSelector + ' li').each(function () {
            var $this = $(this),
                $checkbox = $('<input type="checkbox" class="apexTreeCheckbox">');
            $checkbox.attr('data-tree_id', $this.attr('id'));
            $this.prepend($checkbox);
        });

        //set checked property for the tree checkboxes based on the item checkboxes
        apexTreeCheckbox.syncTreeWithItem(treeDomSelector, itemDomSelector);

        //setup click event on the tree item checkboxes
        $(treeDomSelector).on('click', '.apexTreeCheckbox', function () {
            var $this = $(this),
                $children = $this.parent().find('input.apexTreeCheckbox');

            //make all children checkboxes match the parent
            $children.prop('checked', $this.prop('checked'));

            //if unselecting then make sure parent checkboxes are unselected as well
            if ($this.prop('checked') === false) {
                $this.parentsUntil(treeDomSelector, 'li')
                    .children('input.apexTreeCheckbox').prop('checked', false);
            }

            //set the parents if necessary
            apexTreeCheckbox.setParentCheckboxes(treeDomSelector);
            
            //sync item with tree
            apexTreeCheckbox.syncItemWithTree(treeDomSelector, itemDomSelector);

        });
    };

})(this.apexTreeCheckbox = this.apexTreeCheckbox || {}, jQuery);

very usefull!

will this work in apex 5.0 with jstree?

will this work in latest apex versions like 19.1, 20.1