Javascript hide show dynamic divs

Question

I am very new to Javascript. I have an app that has milestones and tasks associated with said milestones. I hide and show the tasks associated with by using toggleClass in the Javascript. I am trying to hide and show the tasks-group associated with a Milestone on checking a checkbox associated with the Milestone. I can get that to work, but if I have more than one milestone the checkbox toggles the hide on ALL the tasks, not the ones associated with the milestone. I can't use ids because I'm calling the milestones dynamically. I only want to hide the tasks that are in the child div of the given unchecked milestone.

I have created a jsfiddle

http://jsfiddle.net/aow9f6h2/1/

<div class="milestone" style="text-align:left; width:100%"> 
  <div class="milestone-row"><i class="fa fa-caret-down pull-right"></i>
   <label class="milestone-name"><input type="checkbox"  class="milestone-name-box" checked="true"> MILESTONE NAME</label>
   </div>
<div class="row task-group  " >
 <!-- panel-default -->
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
        <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
        <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
        <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
        <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>

        <!-- ad 100 x 250 -->
       <!-- particpants -->

</div><!-- row -->
</div><br><br>
          <div class="milestone" style="text-align:left; width:100%"> 
  <div class="milestone-row"><i class="fa fa-caret-down pull-right"></i>
   <label class="milestone-name"><input type="checkbox"  class="milestone-name-box" checked="true"> MILESTONE NAME</label>
   </div>
<div class="row task-group  " >
 <!-- panel-default -->
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
        <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
        <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
        <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
        <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>
      <div class="col-xs-6  col-sm-3 col-md-3 col-lg-3 "  >       <label class="tasks"><input type="checkbox" checked="true"> Task Name</label></div>

        <!-- ad 100 x 250 -->
       <!-- particpants -->

</div><!-- row -->
</div>

JS

$("input[type='checkbox']").change(function() {
   $(this).closest("label").toggleClass("unchecked"); 
});



     $(".milestone input[class='milestone-name-box']").click(function(e)  {
    e.stopPropagation();
            $(".task-group").toggleClass("hide");

});

CSS

    .hide {
    display: none !important;
    }

    .unchecked {    
    font-weight:400;
    color:#A4A4A4; 
    letter-spacing:.5px;

    }

Answer 1

something like this? http://jsfiddle.net/aow9f6h2/2/

<div class="section">
    <input type="checkbox" class="milestone"/>Milestone<br/>
    <div class="task"><input type="checkbox" />Task</div>
    <div class="task"><input type="checkbox" />Task</div>
    <div class="task"><input type="checkbox" />Task</div>
</div><br/>
<div class="section">
    <input type="checkbox" class="milestone"/>Milestone<br/>
    <div class="task"><input type="checkbox" />Task</div>
    <div class="task"><input type="checkbox" />Task</div>
    <div class="task"><input type="checkbox" />Task</div>
</div>

$(document).ready(function() {
    $('.milestone').attr('checked', true);
    $('.milestone').on('change', function() {
        if($(this).is(':checked')) {
            $(this).closest('.section').find('.task').show();
        }
        else {
            $(this).closest('.section').find('.task').hide();
        }
    });
});

Answer 2

在http://api.jquery.com/on/上使用，而不是直接事件绑定