title: Select child checkboxes in JQuery
body: <p>I'm trying to generate a "collapsing" checkboxes tree from a JSON retruned from my API, actually the tree is build fine but now i have to handle the selection of child checkboxes when the parent is checked,</p>
  
  <p>i was trying to use something like this but the debugged when a checkbox is checked is doesn't even enter inside that method.</p>
  
  <pre><code>$("#sidebar").on("change", "input[type='checkbox']", function () {
      $(this).siblings('ul')
          .find("input[type='checkbox']")
          .prop('checked', this.checked);
  });
  </code></pre>
  
  <p>The code from which i generate the collapsing checkbox tree is the following</p>
  
  <pre><code>var casse = () =&gt; {
      var callback = (casse) =&gt; {
          var item = []
          $.each(casse, (a, negozio) =&gt; {
              const PV = negozio.PV;
              const DS = negozio.DS;
              item.push('&lt;li class="nav-item"&gt;')
              item.push('&lt;input type="checkbox" class="check-negozio" value="' + PV + '"&gt;')
              item.push('&lt;a class="nav-link collapsed text-truncate" href="#" data-toggle="collapse" data-pv="' + PV + '" data-target="#pv' + PV + '"&gt;')
              item.push('&lt;i class="fas fa-store"&gt;&lt;/i&gt;')
              item.push('&lt;span class="d-none d-sm-inline"&gt;' + DS + '&lt;/span&gt;')
              item.push('&lt;/a&gt;')
              item.push('&lt;div class="collapse" id="pv' + PV + '" aria-expanded="false"&gt;')
              item.push('&lt;ul class="flex-column pl-2 nav"&gt;')
              $.each(casse[a].CS, (b, cassa) =&gt; {
                  const CS = cassa.CS;
                  if (cassa.OP.length === 0) {
                      item.push('&lt;li class="nav-item"&gt;')
                      item.push('&lt;input type="checkbox" class="check-cassa" value="' + CS + '"&gt;')
                      item.push('&lt;a class="nav-link py-0" href="#" data-cs="' + PV + CS + '"&gt;')
                      item.push('&lt;i class="fas fa-desktop"&gt;&lt;/i&gt;')
                      item.push('&lt;span&gt;CASSA-' + CS + '&lt;/span&gt;')
                      item.push('&lt;/a&gt;')
                      item.push('&lt;/li&gt;')
                  } else {
                      item.push('&lt;li class="nav-item"&gt;')
                      item.push('&lt;input type="checkbox" class="check-cassa" value="' + CS + '"&gt;')
                      item.push('&lt;a class="nav-link collapsed py-1" href="#" data-toggle="collapse" data-target="#cs' + PV + CS + '" data-cs="' + CS + '"&gt;')
                      item.push('&lt;i class="fas fa-desktop"&gt;&lt;/i&gt;')
                      item.push('&lt;span&gt;CASSA-' + CS + '&lt;/span&gt;')
                      item.push('&lt;/a&gt;')
                      item.push('&lt;div class="collapse" id="cs' + PV + CS + '" aria-expanded="false"&gt;')
                      item.push('&lt;ul class="flex-column nav pl-4"&gt;')
                      $.each(cassa.OP, (c, operatori) =&gt; {
                          item.push('&lt;li class="nav-item"&gt;')
                          item.push('&lt;input type="checkbox" class="check-operatore" value="' + operatori.CODOP + '"&gt;')
                          item.push('&lt;a class="nav-link p-1" href="#"&gt;')
                          item.push('&lt;i class="far fa-user"&gt;&lt;/i&gt;')
                          item.push('&lt;span&gt;' + operatori.DESCOP + '&lt;/span&gt;')
                          item.push('&lt;/a&gt;')
                          item.push('&lt;/li&gt;')
                      })
                      item.push('&lt;/ul&gt;')
                      item.push('&lt;/div&gt;')
                      item.push('&lt;/li&gt;')
                  }
              })
  
              item.push('&lt;/ul&gt;')
              item.push('&lt;/div&gt;')
              item.push('&lt;/li&gt;')
          });
          item.push('&lt;hr class="my-auto mt-2" /&gt;')
          $('#sidebar').prepend(item.join(""));
  
      }
      $.get('api/config/', callback);
  }
  </code></pre>
  
  <p>Could the issue be that as the checkboxes are generate dynamically that on.change handler is unabled to get attached?</p>
  
  <p>If so how can i fix it? is there a better way to handle a "checkboxes tree" like that? </p>
  
  <p>I'd attach a static version of one generated collapsing checkboxes tree <a href="https://jsfiddle.net/nyg5b7vr/" rel="nofollow noreferrer">HERE</a> in JSFiddle with jquery method i was trying to use..</p>