javascript - 检查复选框是否被选中/为真，然后显示一个 div

Question

我不确定在我的尝试中我做错了什么(见下面的片段)。如果关联的复选框被选中，我只是想显示一个 div。我已经尝试了 is 和 prop 方法，但似乎都不起作用。

有人看到我做错了什么吗？

Fiddle

if ($('#package1').prop("checked")) {
  $('#pg-selection').show();
}
if ($('#package2').is(":checked")) {
  $('#tp-selection').show();
}

.package-setup {
  display: none;
}

<input type="checkbox" class="product-check" id="package1" value="">
<input type="checkbox" class="product-check" id="package2" value="">
<div class="package-setup-section">
  Section 2
  <div id="pg-selection" class="package-setup">Package 1</div>
  <div id="tp-selection" class="package-setup">Package 2</div>
</div>

Answer 1

您需要的是复选框上的 onchange 事件，因为如果您不放置它，您的代码最初只会执行一次，因此不会成功，因为复选框最初未被选中。

$('#package1').on('change', function() {
  if ($('#package1').prop("checked") ) {
    $('#pg-selection').show();
  } else {
    $('#pg-selection').hide();
  }
})


$('#package2').on('change', function() {
  if ($('#package2').prop("checked") ) {
    $('#tp-selection').show();
  } else {
    $('#tp-selection').hide()
  }
})

.package-setup {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" class="product-check" id="package1" value="">
<input type="checkbox" class="product-check" id="package2" value="">
<div class="package-setup-section">
  Section 2
  <div id="pg-selection" class="package-setup">Package 1</div>
  <div id="tp-selection" class="package-setup">Package 2</div>
</div>