复选框子类别隐藏，直到选中父复选框

Question

我试图让子类别复选框仅在相关父复选框被选中时才显示。

目前我使用下面的代码：

<script type="text/javascript"> 
$(document).ready(function() { 
$("#listing_category-401 .children").css("display", "none"); 
$(".option").change(function() { 

    if ($('checkbox[id="in-listing_category-401"] :checked').val() == "true") { 
     $("#listing_category-401 .children").slideDown("fast"); 
    } 
}); 
}); 

Answer 1

好了，走近它略有不同，但下面的工作，继承人的小提琴：https://jsfiddle.net/pxt4x7q1/

而这里的代码：

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 

    <li id="listing_category-401"><label class="selectit"><input value="401" type="checkbox" class="required option" name="_listing_category[]" id="in-listing_category-401" aria-required="true"> Artists/Bands</label> 
    <ul class="children"> 
    <li id="listing_category-399"><label class="selectit"><input value="399" type="checkbox" class="required" name="_listing_category[]" id="in-listing_category-399" aria-required="true"> Acoustic Artists/Bands</label></li> 
    <li id="listing_category-402"><label class="selectit"><input value="402" type="checkbox" class="required" name="_listing_category[]" id="in-listing_category-402" aria-required="true"> Alternative Artists/Bands</label></li> 
    </ul> 
    </li> 

风格：

<style TYPE="text/css" MEDIA=screen> 
    .children { 
    display:none 
    } 
    </style> 

JAVASCRIPT：

$(document).ready(function() { 
    $('#in-listing_category-401').change(function() { 
     if (this.checked) { 
      $("#listing_category-401 .children").slideDown("fast"); 
     } 
     else { 
      $("#listing_category-401 .children").slideUp("fast"); 
     } 
    }) 
    }) 
    </script>