Jacob J Jacob J - 23 days ago 8
jQuery Question

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>




Answer
// Reference the elements
var itemShipping = $('#itemShipping');
var checkbox = $('#itemWillShip');
// A function for hiding and showing the div
function toggleItemShipping(){
 itemShipping.toggle(checkbox.prop('checked'));
}
// Event handler for clicking the checkbox
checkbox.on('change', toggleItemShipping);
// When the page loads set the correct state
toggleItemShipping();

Here's the full thing:

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

<script>
// Reference the elements
var itemShipping = $('#itemShipping');
var checkbox = $('#itemWillShip');
// A function for hiding and showing the div
function toggleItemShipping(){
 itemShipping.toggle(checkbox.prop('checked'));
}
// Event handler for clicking the checkbox
checkbox.on('change', toggleItemShipping);
// When the page loads set the correct state
toggleItemShipping();
</script>

Comments