title: Set indeterminate property of checkbox in jQuery on dynamic creation in HTML
body: <p>I am creating a set of dynamic checkboxes in Cheetah template (that in turn uses python dictionary to create these).</p>
  
  <p>I have emulated a tristate behavior for these checkboxes by associating a function onChange in jQuery. It works correctly once the page is loaded. But unable to get it working for the first load of page. For ex, if a checkbox is selected in the subgroup, the parent is not set to indeterminate state. Similarly, if all checkboxes are selected "select all" option isn't checked. </p>
  
  <p>How do I trigger the function on dynamic creation?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    //jQuery functions to handle all actions for the widget
    //This code handles enabling the checkboxes for children belonging to 
    //a particular parent based on the attribute "group". The parent checkbox
    //behavior is emulated for children.
    $('input[type="checkbox"]').on('change', function() {
      if ($(this).attr("group").indexOf("group") &gt;= 0) {
        groupid = $(this).attr("group").split("_")[1]
        if ($(this).is(':checked')) {
          $('.child' + groupid + '&gt; input[type=checkbox]').each(function() {
            $(this).prop("checked", true);
          });
        } else {
          $('.child' + groupid + '&gt; input[type=checkbox]').each(function() {
            $(this).prop("checked", false);
          });
        }
      } else if ($(this).attr("group").indexOf("child") &gt;= 0) {
        //Implementation for tristate behavior for inner level children list.
        //The parent checkbox's state is changed according to child's state change.
        //It can be one of the following:selected, unselected and indeterminate.
        var checkboxlength = $(this).parent().parent().find(
            '.childCheckbox').length,
          checkall2 = $(this).parent().parent().parent().find('.parent').find(
            '.parentCheckbox'),
          selcheckboxlength = $(this).parent().parent().find(
            '.childCheckbox:checkbox:checked').length;
  
        checkall2.prop("checked", false);
        checkall2.prop("indeterminate", false);
  
        checkall2.prop("checked", checkboxlength == selcheckboxlength);
        checkall2.prop("indeterminate", checkboxlength != selcheckboxlength &amp;&amp; selcheckboxlength &gt; 0);
      } else {
        return;
      }
      
      //Handle the tristate behavior for select all function (including parents and children).
      var checkall = $('#select_all'),
        allParentCheckboxlength = $(document).find('input.parentCheckbox')
        .length,
        selParentcheckboxlength = $(document).find(
          'input.parentCheckbox:checked').length;
        indetrmntParentlength = $(document).find(
          'input.parentCheckbox:indeterminate').length;
        //alert(indetrmntParentlength);
          checkall.prop("checked", false);
          checkall.prop("indeterminate", false);
  
          checkall.prop("checked", allParentCheckboxlength == selParentcheckboxlength);
          checkall.prop("indeterminate", indetrmntParentlength != 0 || allParentCheckboxlength != selParentcheckboxlength &amp;&amp; selParentcheckboxlength != 0);        
    });
  });
  
  //Expand or collapse the div according to arrow click for children of a particular parent.
  $(document).on('click', '.deviceArrow.closedDiv', function() {
    $(this).parent().parent().find(".childContainer").show();
    $(this).removeClass("closedDiv").addClass('openedDiv');
  });
  $(document).on('click', '.deviceArrow.openedDiv', function() {
    $(this).parent().parent().find(".childContainer").hide();
    $(this).removeClass("openedDiv").addClass('closedDiv');
  });
  
  //Collapse all collapses all children divs open and displays only parent.
  $(document).on('click', '.collapseAll', function() {
    $(document).find(".fileGroupTable").each(function() {
      $(this).find(".childContainer").hide();
      $(this).find(".parent .deviceArrow").removeClass("openedDiv").addClass(
        'closedDiv');
    });
  });
  
  //Expand all expands children of each parent.
  $(document).on('click', '.expandAll', function() {
    $(document).find(".fileGroupTable").each(function() {
      $(this).find(".childContainer").show();
      $(this).find(".parent .deviceArrow").removeClass("closedDiv").addClass(
        'openedDiv');
    });
  });
  
  //Reset unchecks every checkbox contained in the div.
  $(document).on('click', '#reset', function() {
    $('#select_all').prop("checked", false);
    setCheckBoxes(false);
  });
  
  //Change parent and children checkbox state if select all is changes.
  $(document).on('change', '#select_all', function() {
    if ($(this).prop("checked") == true) {
      setCheckBoxes(true);
    } else if ($(this).prop("checked") == false) {
      setCheckBoxes(false);
    }
  });
  
  //Fucntion to set checkboxes (both parent and children) to a value sent in parameter.
  function setCheckBoxes(setValue) {
    $('.fileGroupTable').find('.eachFileGroupDiv .childContainer').each(function() {
      $(this).find('input[type=checkbox]').prop("checked", setValue);
    });
    $('.fileGroupTable').find('.eachFileGroupDiv .parent').each(function() {
      $(this).find('input[type=checkbox]').prop("checked", setValue);
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.child, .child1,.child2,.child3{
   padding-left: 40px;
  }
  .parent{
   font-weight:bold;
  }
  .openedDiv::before {
      content: "V";
      font-weight: bold;
  
  }
  
  .body{
   padding: 20px;
   margin-left: 10px; 
  }
  .closedDiv::before {
      content: "&gt;";
      display: inline-block;
  }
  .openedDiv, .closedDiv {
      cursor: pointer;
      margin: 0 4px;
      vertical-align: baseline;
  }
  .openedDiv, .closedDiv {
      color: #bbbbbb;
      cursor: pointer;
      display: inline-block;
      margin-top: 4px;
      vertical-align: top;
  }
  .fileGroupActions{
   padding:10px;
   width:440px;
  }
  
  .fileGroupTable{
   padding:10px;
   height: auto;
   width:450px;
   border: 1px solid black;
  }
  
  .fileGroupActionsSpan{
   margin-left: 13px;
  }
  
  .expandAll{
   padding: 5px;
   margin-left: 45px;
  }
  
  .collapseAll{
   padding: 5px;
  }
  
  .reset{
   float:right;
  }
  &lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="body"&gt;
  &lt;div id="file_group_actions" class="fileGroupActions"&gt;
   &lt;span class="fileGroupActionsSpan fileGroupActions"&gt;
    &lt;input type="checkbox" group="none" id="select_all"&gt; Select All
    &lt;a href="javascript:void(0);" class='expandAll'&gt; Expand All&lt;/a&gt;
    &lt;a href="javascript:void(0);" class='collapseAll'&gt; Collapse All&lt;/a&gt;
    &lt;input type="button" value="Reset" class="reset" id="reset"&gt;
   &lt;/span&gt;
  &lt;/div&gt;
  &lt;div id="file_group_table" class=fileGroupTable&gt;
   &lt;div class="eachFileGroupDiv"&gt;
    &lt;div class="parent" id="parent_1"&gt;
     &lt;i id="test1" class="deviceArrow openedDiv"&gt;&lt;/i&gt;
     &lt;input group="group_1" id="test1" class="parentCheckbox" type="checkbox"&gt; Archived and compressed
    &lt;/div&gt;
    &lt;div id="child_container_1" class="childContainer"&gt;
     &lt;div class="child1"&gt;
      &lt;input group="child_1" class="childCheckbox" type="checkbox" checked="true"&gt; jar
     &lt;/div&gt;
     &lt;div class="child1"&gt;
      &lt;input group="child_1" class="childCheckbox" type="checkbox"&gt; war
     &lt;/div&gt;
     &lt;div class="child1"&gt;
      &lt;input group="child_1" class="childCheckbox" type="checkbox"&gt; vsi
     &lt;/div&gt;
     &lt;div class="child1"&gt;
      &lt;input group="child_1" class="childCheckbox" type="checkbox"&gt; msu
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
   
   &lt;div class="eachFileGroupDiv"&gt;
    &lt;div id="parent_2" class="parent" &gt;
     &lt;i class="deviceArrow openedDiv"&gt;&lt;/i&gt;
     &lt;input group="group_2" class="parentCheckbox" type="checkbox"&gt; Audio and sound
    &lt;/div&gt;
    &lt;div id="child_container_2" class="childContainer"&gt; 
     &lt;div class="child2"&gt;
      &lt;input group="child_2" class="childCheckbox" type="checkbox"&gt; wpl
     &lt;/div&gt;
     &lt;div class="child2"&gt;
      &lt;input group="child_2" class="childCheckbox" type="checkbox"&gt; cda
     &lt;/div&gt;
     &lt;div class="child2"&gt;
      &lt;input group="child_2" class="childCheckbox" type="checkbox"&gt; wma
     &lt;/div&gt;
     &lt;div class="child2"&gt;
      &lt;input group="child_2" class="childCheckbox" type="checkbox"&gt; snd
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="eachFileGroupDiv"&gt;
    &lt;div id="parent_3" class="parent"&gt;
     &lt;i class="deviceArrow openedDiv"&gt;&lt;/i&gt;
     &lt;input group="group_3" class="parentCheckbox" type="checkbox"&gt; Backup
    &lt;/div&gt;
    &lt;div id="child_container_3" class="childContainer"&gt; 
     &lt;div class="child3"&gt;
      &lt;input group="child_3" class="childCheckbox" type="checkbox"&gt; wbcat
     &lt;/div&gt;
     &lt;div class="child3"&gt;
      &lt;input group="child_3" class="childCheckbox" type="checkbox"&gt; xlk
     &lt;/div&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/u57k1sto/" rel="nofollow noreferrer" title="JS FIDDLE">JS Fiddle</a></p>
  
  <p>I tried using <code>.trigger("change")</code> but it resets all checkboxes.</p>