Question

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.

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.

Any help would be great

Current jquery

$(document).ready(function () {
    $(".topic input").click(function () {
        $(this).parents("tr").find("input").prop('checked', (this.checked ? "checked" : ""));

    })

Html

<div class="topic">
     <input type="checkbox" name="topic" value="1">
     <span>Topic 1</span>
</div>

<div class="subtopic">
   <ul class="inputs-list">
      <li>
         <input type="checkbox" checked="" name="subtopic" value="1">
         <span>subtopic 1</span>
      </li>
      <li>
         <input type="checkbox" checked="" name="subtopic" value="2">
         <span>subtopic 2</span>
      </li>
      <li>
         <input type="checkbox" checked="" name="subtopic" value="3">
         <span>subtopic 3</span>
      </li>
    </ul>
</div>

Answer 1

$(document).ready(function () {

    $(".topic input[type='checkbox']").click(function(){
        var is_checked=$(this).is(":checked");
        $(".inputs-list").find('input').prop("checked",is_checked);
    });
    $(".inputs-list > li > input[type='checkbox']").click(function() {
        is_checked=$(this).is(":checked");
        $(".topic input[type='checkbox']").prop("checked",(!is_checked)?is_checked:true);
    });
});

<div class="topic">
         <input type="checkbox" name="topic"  class="topic" value="1">
         <span>Topic 1</span>
        </div>

    <div class="subtopic">
       <ul class="inputs-list">
          <li>
             <input type="checkbox"  name="subtopic" value="1">
             <span>subtopic 1</span>
          </li>
          <li>
             <input type="checkbox"  name="subtopic" value="2">
             <span>subtopic 2</span>
          </li>
          <li>
             <input type="checkbox"  name="subtopic" value="3">
             <span>subtopic 3</span>
          </li>
        </ul>
    </div>