Javascript隐藏显示动态div

Question

我对Java非常陌生。 我有一个具有里程碑和与所说里程碑相关的任务的应用程序。 我使用Java中的toggleClass隐藏和显示了与之相关的任务。 我在尝试检查与里程碑关联的复选框时试图隐藏和显示与里程碑关联的任务组。 我可以使它正常工作，但是如果我有多个里程碑，则此复选框将切换所有任务的隐藏，而不是与该里程碑关联的任务。 我无法使用ID，因为我正在动态调用里程碑。 我只想隐藏给定未选中里程碑的子div中的任务。

我创建了一个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

这样的东西？ 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/上使用，而不是直接事件绑定