title: select and unselect not working for dynamically created checkbox in js
body: <p>I've created dynamically in java script checkbox tree using bootstrap js and css. Select and unselect does not working: <a href="https://i.stack.imgur.com/QRPa9.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>In the second picture is the html created dynamically from js: 
  <a href="https://i.stack.imgur.com/fMWw3.png" rel="nofollow noreferrer">enter image description here</a>
  If I copy this and create in the html it is working. 
  How to create dynamically check box tree?</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>$(function() {
  
    $('input[type="checkbox"]').change(checkboxChanged);
  
    function checkboxChanged() {
      var $this = $(this),
          checked = $this.prop("checked"),
          container = $this.parent(),
          siblings = container.siblings();
  
      container.find('input[type="checkbox"]')
      .prop({
          indeterminate: false,
          checked: checked
      })
      .siblings('label')
      .removeClass('custom-checked custom-unchecked custom-indeterminate')
      .addClass(checked ? 'custom-checked' : 'custom-unchecked');
  
      checkSiblings(container, checked);
    }
  
    function checkSiblings($el, checked) {
      var parent = $el.parent().parent(),
          all = true,
          indeterminate = false;
  
      $el.siblings().each(function() {
        return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
      });
  
      if (all &amp;&amp; checked) {
        parent.children('input[type="checkbox"]')
        .prop({
            indeterminate: false,
            checked: checked
        })
        .siblings('label')
        .removeClass('custom-checked custom-unchecked custom-indeterminate')
        .addClass(checked ? 'custom-checked' : 'custom-unchecked');
  
        checkSiblings(parent, checked);
      } 
      else if (all &amp;&amp; !checked) {
        indeterminate = parent.find('input[type="checkbox"]:checked').length &gt; 0;
  
        parent.children('input[type="checkbox"]')
        .prop("checked", checked)
        .prop("indeterminate", indeterminate)
        .siblings('label')
        .removeClass('custom-checked custom-unchecked custom-indeterminate')
        .addClass(indeterminate ? 'custom-indeterminate' : (checked ? 'custom-checked' : 'custom-unchecked'));
  
        checkSiblings(parent, checked);
      } 
      else {
        $el.parents("li").children('input[type="checkbox"]')
        .prop({
            indeterminate: true,
            checked: false
        })
        .siblings('label')
        .removeClass('custom-checked custom-unchecked custom-indeterminate')
        .addClass('custom-indeterminate');
      }
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* { margin: 0; padding: 0; }
  
  #page-wrap {
    margin: auto 0;
  }
  
  .treeview {
    margin: 10px 0 0 20px;
  }
  
  ul { 
    list-style: none;
  }
  
  .treeview li {
    background: url(http://jquery.bassistance.de/treeview/images/treeview-default-line.gif) 0 0 no-repeat;
    padding: 2px 0 2px 16px;
  }
  
  .treeview &gt; li:first-child &gt; label {
    /* style for the root element - IE8 supports :first-child
    but not :last-child ..... */
    
  }
  
  .treeview li.last {
    background-position: 0 -1766px;
  }
  
  .treeview li &gt; input {
    height: 16px;
    width: 16px;
    /* hide the inputs but keep them in the layout with events (use opacity) */
    opacity: 0;
    filter: alpha(opacity=0); /* internet explorer */ 
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(opacity=0)"; /*IE8*/
  }
  
  .treeview li &gt; label {
    background: url(https://www.thecssninja.com/demo/css_custom-forms/gr_custom-inputs.png) 0 -1px no-repeat;
    /* move left to cover the original checkbox area */
    margin-left: -20px;
    /* pad the text to make room for image */
    padding-left: 20px;
  }
  
  /* Unchecked styles */
  
  .treeview .custom-unchecked {
    background-position: 0 -1px;
  }
  .treeview .custom-unchecked:hover {
    background-position: 0 -21px;
  }
  
  /* Checked styles */
  
  .treeview .custom-checked { 
    background-position: 0 -81px;
  }
  .treeview .custom-checked:hover { 
    background-position: 0 -101px; 
  }
  
  /* Indeterminate styles */
  
  .treeview .custom-indeterminate { 
    background-position: 0 -141px; 
  }
  .treeview .custom-indeterminate:hover { 
    background-position: 0 -121px; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="skin-blue sidebar-mini" style="height: auto; min-height: 100%;"&gt;
     
      &lt;!-- changing values in row --&gt;
      &lt;input id="rowNumber" class="form-control " type="hidden"&gt;
  
      &lt;div class="wrapper" style="height: auto; min-height: 100%; background-color: #ECEFF4;"&gt;
          &lt;!-- Main content --&gt;
          &lt;section class="content"&gt;
             
              &lt;div class="row"&gt;
                  &lt;div class="col-xs-12"&gt;
                      &lt;!-- /.box --&gt;
                      &lt;div class="box"&gt;
                          &lt;!-- /.box-header --&gt;
                          &lt;div class="box-body"&gt;   
  
                              &lt;button onclick="addCheckBox()"&gt;add&lt;/button&gt;
                              &lt;input id="check" name="checkBoxes"&gt;   
                              &lt;div id="page-wrap"&gt;
                                  &lt;ul class="treeview"&gt;                                    
                                      &lt;li&gt;
                                          &lt;input type="checkbox" name="short" id="short"&gt;
                                          &lt;label for="short" class="custom-unchecked"&gt;Short Things&lt;/label&gt;
  
                                          &lt;ul id="cc"&gt;
                                             
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
  
                              &lt;/div&gt;                            
                          &lt;/div&gt;                       
                          &lt;!-- /.box-body --&gt;
                      &lt;/div&gt;
                      &lt;!-- /.box --&gt;
                  &lt;/div&gt;
                  &lt;!-- /.col --&gt;
              &lt;/div&gt;
              &lt;!-- /.row --&gt;
          &lt;/section&gt;
          &lt;!-- /.content --&gt;
      &lt;/div&gt;
  &lt;script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E=" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      function addCheckBox() {
  
          var listElement = document.getElementById('cc');
          var check_value = new Array();
          check_value[1] = "Yellow";
          check_value[2] = "Red";
          check_value[3] = "Green";
  
          var li, checkbox, label, br, a;
  
          var title = document.getElementById('check').value;
  
          for (var i = 1; i &lt;= title; i++) {
              li = document.createElement("li");
              if (i == title)
              {
                  li.className = "last";
              }
              checkbox = document.createElement("input");
              checkbox.type = "checkbox";
              checkbox.name = "short-" + i;
              checkbox.id = "short-" + i;
              label = document.createElement("label");
              label.htmlFor = "short-" + i;
              label.className = "custom-unchecked";
              label.setAttribute("class", "custom-unchecked");
              label.innerHTML = check_value[i];
  
              li.innerHTML += checkbox.outerHTML + label.outerHTML;
              listElement.appendChild(li);
  
              /*li.appendChild(checkbox);
              //li.appendChild(label);
              listElement.appendChild(li);
              listElement.appendChild(checkbox);
              listElement.appendChild(label); */
          }
      }  
  &lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>