title: Checking/unchecking Main checkbox when all sub checkboxes are check/uncheck
body: <p>I am currently working on adding checkboxes to my website and adding some jquery so when the user checks the topic checkbox, it checks all the subtopic checkboxes. I have got this to working using the code below. </p>
  
  <p>What I can not seems to get to work is when the user checks all the subtopic checkboxes it checks the topic checkbox and when the user uncheck a subtopic it unchecks the topic checkbox.</p>
  
  <p>Any help would be great </p>
  
  <p>Current jquery</p>
  
  <pre><code>$(document).ready(function () {
      $(".topic input").click(function () {
          $(this).parents("tr").find("input").prop('checked', (this.checked ? "checked" : ""));
  
      })
  </code></pre>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="topic"&gt;
       &lt;input type="checkbox" name="topic" value="1"&gt;
       &lt;span&gt;Topic 1&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div class="subtopic"&gt;
     &lt;ul class="inputs-list"&gt;
        &lt;li&gt;
           &lt;input type="checkbox" checked="" name="subtopic" value="1"&gt;
           &lt;span&gt;subtopic 1&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
           &lt;input type="checkbox" checked="" name="subtopic" value="2"&gt;
           &lt;span&gt;subtopic 2&lt;/span&gt;
        &lt;/li&gt;
        &lt;li&gt;
           &lt;input type="checkbox" checked="" name="subtopic" value="3"&gt;
           &lt;span&gt;subtopic 3&lt;/span&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>