How can I show an html area when a custom checkbox is checked?

The issue i'm having is telling when a custom checkbox has been checked? When it is checked i'd like to show the itemShipping div. As far as I can tell, the input isn't actually being checked, just the :after element on the label changes. Any help is much appreciated :)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/awesome-bootstrap-checkbox/0.3.7/awesome-bootstrap-checkbox.css" rel="stylesheet"/>

<div class="checkbox checkbox-primary">
  <input class="styled" type="checkbox" id="itemWillShip" name="itemWillShip">
  <label for="itemWillShip">&nbsp;Will Ship</label>
</div>

<div id="itemShipping">
  <div class="col-sm-12 form-group">
    <label for="productShippingInfo" class="required">Shipping Information</label>
    <textarea class="form-control" rows="4" id="productShippingInfo" name="productShippingInfo"></textarea>
    <span id="error" class="sr-only">(error)</span>
    <span id="helpBlock" class="help-block">Add all information about your shipping details such as price, shipping method, ect.</span>
  </div>
</div>