How to know if all checkbox of jstree is checked or not

738 Views Asked by At

I am using jstree with checkbox.

I have another checkbox with Id chkSelectAll (Select All). When user select it, All jstree checkboxes are checked and if we unselect it, all jstree checkboex are unchecked using below code:

  $('#chkSelectAll').change(function() {          
       if ($('#chkSelectAll').is(":checked"))
       { 
           $("#drpDownSource .source-list").jstree().check_all(true);
       }
       else
       {
           $("#drpDownSource .source-list").jstree().uncheck_all(true);
       }
     }); 

Now if all jstree checkboxes are selected manually then I want to check chkSelectAll checkbox and if any one jstree checkbox is unchecked then I want chkSelectAll to be unchecked. I am using below code:

So How can I know whether all jstree checkbox are checked or not?

.on("check_node.jstree uncheck_node.jstree", function (e, data) {            
        debugger;
        if (e.type == "uncheck_node") {
            $("#chkSelectAll").prop( "checked", false );                
        }
        else if (e.type == "check_node") {
            // here I get only one checkbox's status.
            // How to check all checkboxe's status
        }
    }); 

Thanks

2

There are 2 best solutions below

0
On

Please have a look at https://www.jstree.com/api/#/?q=checkbox&f=check_node.jstree

Please note below

triggered when an node is checked (only if tie_selection in checkbox settings is false)

I hope your tree checkbox plugin configuration is having tie_selection setting to be set as false.

If you are looking for whether all nodes are checked manually to check "Select All" checkbox above then you can use below c

else if (e.type == "check_node") {                  
  if ($(this).jstree().get_json('#', {flat:true}).length === $(this).jstree().get_checked(true).length)
    $("#chkSelectAll").prop( "checked", true );                     
}

For complete and working example, you can have a look at https://everyething.com/Example-of-jsTree-with-select-all-checkbox

0
On

If you have single parent node with specific id then you can use is_checked (obj) for parent to decide whether all other nodes are checked or not.