JSFiddle - React, Tailwind, and code Playground

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<ul>
   <li>Main
    <ul>
        <li><input type="checkbox" /> parent 1
           <ul>
               <li><input type="checkbox" />sub 1</li>
               <li><input type="checkbox" />sub 2
                  <ul>
                     <li><input type="checkbox" />sub sub 2</li>
                     <li><input type="checkbox" />sub sub 3</li>
                  </ul>
                </li>
            </ul> 
        </li>
        <li><input type="checkbox" />parent 2</li>
    </ul>
   </li>
</ul>

CSS

li { padding-left: 20px; }

JavaScript

$(function() {
  $(":checkbox").change(function () {
    $(this).parents().children(':checkbox').attr('checked', this.checked);
  });
});