Checking if checkbox is checked/true and then showing a div

I am not sure what I am doing wrong (see snippet below) in my attempt. I am simply trying to show a div if the associated checkbox is checked. I have tried the is and prop method, but none seem to work.

Anyone see what it is I am doing wrong?

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>