# jQuery checkboxTree plugin demo

Project Home

- (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();`

- Node 1
  - Node 1.1
    - Node 1.1.1
  - Node 1.2
    - Node 1.2.1
    - Node 1.2.2
    - Node 1.2.3
      - Node 1.2.3.1
      - Node 1.2.3.2
    - Node 1.2.4
    - Node 1.2.5
    - Node 1.2.6
- Node 2
  - Node 2.1
    - Node 2.1.1
  - Node 2.2
    - Node 2.2.1
    - Node 2.2.2
    - Node 2.2.3
      - Node 2.2.3.1
      - Node 2.2.3.2
    - Node 2.2.4
    - Node 2.2.5
    - Node 2.2.6

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

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

- Root
  - Node 1
    - Node 1.1
  - Node 2
    - Node 2.1
    - Node 2.2
    - Node 2.3
      - Node 2.3.1
      - Node 2.3.2
    - Node 2.4
    - Node 2.5
    - Node 2.6

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' });`

- Root
  - Node 1
    - Node 1.1
  - Node 2
    - Node 2.1
    - Node 2.2
    - Node 2.3
      - Node 2.3.1
      - Node 2.3.2
    - Node 2.4
    - Node 2.5
    - Node 2.6

This example show how to customize jQueryUI theme icons.

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

- Root
  - Node 1
    - Node 1.1
  - Node 2
    - Node 2.1
    - Node 2.2
    - Node 2.3
      - Node 2.3.1
      - Node 2.3.2
    - Node 2.4
    - Node 2.5
    - Node 2.6

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

- Root
  - Node 1
    - Node 1.1
  - Node 2
    - Node 2.1
    - Node 2.2
    - Node 2.3
      - Node 2.3.1
      - Node 2.3.2
    - Node 2.4
    - Node 2.5
    - Node 2.6

This example show how to initialize a tree.

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

- Root
  - Node 1
    - Node 1.1
  - Node 2
    - Node 2.1
    - Node 2.2
    - Node 2.3
      - Node 2.3.1
      - Node 2.3.2
    - Node 2.4
    - Node 2.5
    - Node 2.6

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' } });`

- Root
  - Node 1
    - Node 1.1
  - Node 2
    - Node 2.1
    - Node 2.2
    - Node 2.3
      - Node 2.3.1
      - Node 2.3.2
    - Node 2.4
    - Node 2.5
    - Node 2.6

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' } });`

- Node 1
  - Node 1.1
    - Node 1.1.1
  - Node 1.2
    - Node 1.2.1
    - Node 1.2.2
    - Node 1.2.3
      - Node 1.2.3.1
      - Node 1.2.3.2
    - Node 1.2.4
    - Node 1.2.5
    - Node 1.2.6
- Node 2
  - Node 2.1
    - Node 2.1.1
  - Node 2.2
    - Node 2.2.1
    - Node 2.2.2
    - Node 2.2.3
      - Node 2.2.3.1
      - Node 2.2.3.2
    - Node 2.2.4
    - Node 2.2.5
    - Node 2.2.6

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)'); });`

- Node 1
  - Node 1.1
    - Node 1.1.1
  - Node 1.2
    - Node 1.2.1
    - Node 1.2.2
    - Node 1.2.3
      - Node 1.2.3.1
      - Node 1.2.3.2
    - Node 1.2.4
    - Node 1.2.5
    - Node 1.2.6
- Node 2
  - Node 2.1
    - Node 2.1.1
  - Node 2.2
    - Node 2.2.1
    - Node 2.2.2
    - Node 2.2.3
      - Node 2.2.3.1
      - Node 2.2.3.2
    - Node 2.2.4
    - Node 2.2.5
    - Node 2.2.6