title: On check Child Checkbox checks Parent Checkbox
body: <p>I managed to do on checking Parent Checkbox to check all Child Checkboxes but i dont know how to do on checking any child checkbox to check the parent checkbox and if all the child checkboxes are unchecked then the Parent checkbox needs to be unchecked.
  1. I did on checking Parent Checkbox to check all Child Checkboxes (completed)
  2. on checking any child checkbox also checks parent checkbox (not complete)
  3. if all the child checkboxes are unchecked then the Parent checkbox unchecks(not complete). 
  This is how far i got:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      $("input[type='checkbox']").change(function () {
          $(this).siblings('ul')
              .find("input[type='checkbox']")
              .prop('checked', this.checked);
      });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;li style="display: block;"&gt;&lt;input type="checkbox"&gt;Lead1 &lt;br&gt;
   &lt;ul&gt;
                      
    &lt;li style="display: block;"&gt;&lt;input type="checkbox"&gt; All Leads &lt;br&gt;&lt;/li&gt;
  
    &lt;li style="display: block;"&gt;&lt;input type="checkbox"&gt; Recent Leads &lt;br&gt;&lt;/li&gt;
  
    &lt;li style="display: block;"&gt;&lt;input type="checkbox"&gt; My Leads &lt;br&gt;&lt;/li&gt;
  
   &lt;/ul&gt;
  
  &lt;/li&gt;
  &lt;li style="display: block;"&gt;&lt;input type="checkbox"&gt;Lead2 &lt;br&gt;
   &lt;ul&gt;
                      
    &lt;li style="display: block;"&gt;&lt;input type="checkbox"&gt; first &lt;br&gt;&lt;/li&gt;
  
    &lt;li style="display: block;"&gt;&lt;input type="checkbox"&gt; second &lt;br&gt;&lt;/li&gt;
  
    &lt;li style="display: block;"&gt;&lt;input type="checkbox"&gt; third &lt;br&gt;&lt;/li&gt;
  
   &lt;/ul&gt;
  
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Please Help me to solve this as i am new to jquery and js.</p>