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：

  <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>

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

1 个答案: