🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

The jQuery treeSelector plugin enables the user to select multiple options from a dynamic hierarchical tree structure with checkboxes.

tree-view Checkbox Multiple-Select

Documentation

Simple Tree Selector

node

  • id # for checkbox label element
  • title # view label
  • value # return values
  • children # nodes

Dependencies

  • jQuery 1.7+
  • fontawesome 4.7

U can check index.html

Example

https://shatle.github.io/jquery.treeSelector/

var rootNode = [{   "id": "1",   "title": "Node 0",   "value": 1,   "children": [     {       "id": "11",       "title": "Node 11",       "value": 11,       "children": [         {           "id": "111",           "title": "Node 111",           "value": 111,           "children": []         },         {           "id": "112",           "title": "Node 112",           "value": 112,           "children": []         }       ]     },     {       "id": "12",       "title": "Node 12",       "value": 12,       "children": []     },     {       "id": "13",       "title": "Node 13",       "value": 13,       "children": []     }   ] }]  $('div.treeSelector').treeSelector(rootNode, [11, 12], function (e, values) {   console.info('onChange', e, values); }, {    checkWithParent: true,    titleWithParent: true,   notViewClickParentTitle: true }) 

three options:

 // options var options = $.extend({   // children checked/unchecked if true   checkWithParent: false,   // title with 'title1 - title 2' if true   titleWithParent: false,   // when item click, only view leaf title if true   notViewClickParentTitle: false }, params)  

You May Also Like