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

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

好的，方法略有不同，但下面的方法会起作用，这里是 fiddle：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>

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

Checkbox subcategories hidden until parent checkbox selected

checkbox

parent

categories