jQuery checkboxTree plugin demo

(01) default behaviour
(02) collapse images
(03) auto expand
(04) jQueryUI theme customize
(05) methods usage
(06) initialization
(07) check if full
(08) single branch
(09) events handling

This example show default script behaviour.


        $('#tree1').checkboxTree();

This example show how to use images to handle collapse/expand feature.


        $('#tree2').checkboxTree({
            collapseImage: 'images/minus.png',
            expandImage: 'images/plus.png'
        });

This example show:

how to automatically collapse/expand on check/unchek events
how to use images to handle collapse/expand feature


        $('#tree3').checkboxTree({
            onCheck: {
                node: 'expand'
            },
            onUncheck: {
                node: 'collapse'
            },
            collapseImage: 'images/downArrow.gif',
            expandImage: 'images/rightArrow.gif'
        });

This example show how to customize jQueryUI theme icons.


        $('#tree4').checkboxTree({
            collapseUiIcon: 'ui-icon-plus',
            expandUiIcon: 'ui-icon-minus',
            leafUiIcon: 'ui-icon-bullet'
        });

This example show how to use public methods.


        $('#tree5').checkboxTree();

        $('#tabs-5-checkAll').click(function(){
            $('#tree5').checkboxTree('checkAll');
        });

        $('#tabs-5-uncheckAll').click(function(){
            $('#tree5').checkboxTree('uncheckAll');
        });

        $('#tabs-5-collapse').click(function(){
            $('#tree5').checkboxTree('collapse', $('#tabs-5-node23'));
        });

        $('#tabs-5-expand').click(function(){
            $('#tree5').checkboxTree('expand', $('#tabs-5-node23'));
        });

        $('#tabs-5-check').click(function(){
            $('#tree5').checkboxTree('check', $('#tabs-5-node23'));
        });

        $('#tabs-5-uncheck').click(function(){
            $('#tree5').checkboxTree('uncheck', $('#tabs-5-node23'));
        });

Check all nodes | Uncheck all nodes
Collapse node 2.3 | Expand node 2.3
Check node 2.3 | Uncheck node 2.3

This example show how to initialize a tree.


        $('#tree6').checkboxTree({
            initializeChecked: 'expanded',
            initializeUnchecked: 'collapsed'
        });

This example show how to configure tree to auto-check node when all descendants are checked.


        $('#tree7').checkboxTree({
            onCheck: {
                ancestors: 'checkIfFull',
                descendants: 'check'
            },
            onUncheck: {
                ancestors: 'uncheck'
            }
        });

This example show how to configure tree to admit only one branch selected at time.


        $('#tree8').checkboxTree({
            onCheck: {
                ancestors: 'check',
                descendants: 'uncheck',
                others: 'uncheck'
            },
            onUncheck: {
                descendants: 'uncheck'
            }
        });

This example show default script behaviour.


        $('#tree9').checkboxTree({
/*          Commented because annoying for other examples
            collapse: function(){
                alert('collapse event triggered (passed as option)');
            },
            expand: function(){
                alert('collapse event triggered (passed as option)');
            }//*/
        });

        $('#tree9').bind('checkboxtreecollapse', function() {
            alert('collapse event triggered (externally binded)');
        });

        $('#tree9').bind('checkboxtreeexpand', function() {
            alert('expand event triggered (externally binded)');
        });