title: Treeview With Nested Checkbox Nodes Selection
body: <p>So I want to have a treeview with nested checkbox nodes selection, and I've found a nice example to suit my need <a href="http://experiments.wemakesites.net/css3-treeview-with-multiple-node-selection.html" rel="nofollow">here</a>.  </p>
  
  <p>However, I am unable to duplicate the code to my own site or jsfiddle -- I've created everything required in this fiddle <a href="http://jsfiddle.net/rkv95zax/" rel="nofollow">jsfiddle.net/rkv95zax/</a>, but it is not working as the original site. I.e., the nested selection is not there. What I am missing? Thanks.</p>
  
  <p>UPDATE: OK. I've figured it out, in <a href="http://jsfiddle.net/rkv95zax/1/" rel="nofollow">http://jsfiddle.net/rkv95zax/1/</a>. Full code enclosed below.</p>
  
  <p>Now could someone show me how to walk this treenode and showing only selected leaf nodes please? </p>
  
  <pre><code>CSS:
  
  /*
   * Imageless CSS3 Treeview with Checkbox Support
   * @namespace window.AcidJs
   * @class CSS3Treeview
   * @version 3.0
   * @author Martin Ivanov
   * @url developer website: http://wemakesites.net/
   * @url developer twitter: https://twitter.com/#!/wemakesitesnet
   * @url developer blog http://acidmartin.wordpress.com/
   **/
  
  /*
   * Do you like this solution? Please, donate:
   * https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=QFUHPWJB2JDBS
   **/
  
  .acidjs-css3-treeview,
  .acidjs-css3-treeview *
  {
      padding: 0;
      margin: 0;
      list-style: none;
  }
  
  .acidjs-css3-treeview label[for]::before,
  .acidjs-css3-treeview label span::before
  {
      content: "\25b6";
      display: inline-block;
      margin: 2px 0 0;
      width: 13px;
      height: 13px;
      vertical-align: top;
      text-align: center;
      color: #e74c3c;
      font-size: 8px;
      line-height: 13px;
  }
  
  .acidjs-css3-treeview li ul
  {
      margin: 0 0 0 22px;
  }
  
  .acidjs-css3-treeview *
  {
      vertical-align: middle;
  }
  
  .acidjs-css3-treeview
  {
      font: normal 11px/16px "Segoe UI", Arial, Sans-serif;
  }
  
  .acidjs-css3-treeview li
  {
      -webkit-user-select: none;
      -moz-user-select: none;
      user-select: none;
  }
  
  .acidjs-css3-treeview input[type="checkbox"]
  {
      display: none;
  }
  
  .acidjs-css3-treeview label
  {
      cursor: pointer;
  }
  
  .acidjs-css3-treeview label[for]::before
  {
      -webkit-transform: translatex(-24px);
      -moz-transform: translatex(-24px);
      -ms-transform: translatex(-24px);
      -o-transform: translatex(-24px);
      transform: translatex(-24px);
  }
  
  .acidjs-css3-treeview label span::before
  {
      -webkit-transform: translatex(16px);
      -moz-transform: translatex(16px);
      -ms-transform: translatex(16px);
      -o-transform: translatex(16px);
      transform: translatex(16px);
  }
  
  .acidjs-css3-treeview input[type="checkbox"][id]:checked ~ label[for]::before
  {
      content: "\25bc";
  }
  
  .acidjs-css3-treeview input[type="checkbox"][id]:not(:checked) ~ ul
  {
      display: none;
  }
  
  .acidjs-css3-treeview label:not([for])
  {
      margin: 0 8px 0 0;
  }
  
  .acidjs-css3-treeview label span::before
  {
      content: "";
      border: solid 1px #1375b3;
      color: #1375b3;
      opacity: .50;
  }
  
  .acidjs-css3-treeview label input:checked + span::before
  {
      content: "\2714";
      box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
      opacity: 1;
  }
  
  HTML: 
  
  &lt;h3&gt;Demo&lt;/h3&gt;
  
  &lt;p&gt;Another version of the treeview without checkbox support is available on  
      &lt;a href="css3-treeview.html" target="_blank"&gt;this page&lt;/a&gt;.&lt;/p&gt;
  
  &lt;div class="acidjs-css3-treeview"&gt;
      &lt;ul&gt;
          &lt;li&gt;
              &lt;input type="checkbox" id="node-0" checked="checked" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0"&gt;Libraries&lt;/label&gt;
              &lt;ul&gt;
                  &lt;li&gt;
                      &lt;input type="checkbox" id="node-0-0" checked="checked" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-0"&gt;Documents&lt;/label&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;input type="checkbox" id="node-0-0-0" checked="checked" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-0-0"&gt;My Documents&lt;/label&gt;
                              &lt;ul&gt;
                                  &lt;li&gt;
                                      &lt;input type="checkbox" id="node-0-0-0-0" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-0-0-0"&gt;Downloads&lt;/label&gt;
                                  &lt;/li&gt;
                                  &lt;li&gt;
                                      &lt;input type="checkbox" id="node-0-0-0-1" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-0-0-1"&gt;Projects&lt;/label&gt;
                                  &lt;/li&gt;
                              &lt;/ul&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;input type="checkbox" id="node-0-1" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-1"&gt;Music&lt;/label&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;input type="checkbox" id="node-0-1-0" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-1-0"&gt;My Music&lt;/label&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;input type="checkbox" id="node-0-1-1" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-1-1"&gt;Public Music&lt;/label&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;input type="checkbox" id="node-0-2" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-2"&gt;Pictures&lt;/label&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;input type="checkbox" id="node-0-2-0" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-2-0"&gt;My Pictures&lt;/label&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;input type="checkbox" id="node-0-2-1" /&gt;&lt;label&gt;&lt;input type="checkbox" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-2-1"&gt;Public Pictures&lt;/label&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;input type="checkbox" id="node-0-3" checked="checked" /&gt;&lt;label&gt;&lt;input type="checkbox" checked="checked" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-3"&gt;Video&lt;/label&gt;
                      &lt;ul&gt;
                          &lt;li&gt;
                              &lt;input type="checkbox" id="node-0-3-0" /&gt;&lt;label&gt;&lt;input type="checkbox" checked="checked" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-3-0"&gt;My Videos&lt;/label&gt;
                          &lt;/li&gt;
                          &lt;li&gt;
                              &lt;input type="checkbox" id="node-0-3-1" /&gt;&lt;label&gt;&lt;input type="checkbox" checked="checked" /&gt;&lt;span&gt;&lt;/span&gt;&lt;/label&gt;&lt;label for="node-0-3-1"&gt;Public Videos&lt;/label&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
  Javascript:
  
  $(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
      var
          checkbox = $(this),
          nestedList = checkbox.parent().next().next(),
          selectNestedListCheckbox = nestedList.find("label:not([for]) input:checkbox");
  
      if(checkbox.is(":checked")) {
          return selectNestedListCheckbox.prop("checked", true);
      }
      selectNestedListCheckbox.prop("checked", false);
  });
  </code></pre>