Check if a Checkbox is Checked using jQuery

Using jQuery you can determine if a checkbox has been checked, performing an action based on the result.

by Rich Costello

HTML

<form>
    <p>Do you want to subscribe? <input type="checkbox" name="subscribe" /></p>
    <p><input type="email" placeholder="[email protected]" class="conditionally-loaded" /></p>
</form>

CSS

body {
    font: 13px / 1.6em "Helvetica Neue", Helvetica, Arial, sans-serif;
    padding: 10px;
}
input.conditionally-loaded {
    padding: 6px 8px;
    min-width: 200px;
    border-radius: 4px;
    border: 1px solid #ccc;
}
input[name="subscriber"] {
    margin-left: 10px;
}

JavaScript

var $conditionalInput = $('input.conditionally-loaded');
var $subscribeInput = $('input[name="subscribe"]');

$conditionalInput.hide();
$subscribeInput.on('click', function(){
    if ( $(this).is(':checked') )
        $conditionalInput.show();
    else
        $conditionalInput.hide();
});