CheckBox Checked Hide Divs

Checkbox using .change and .toggle

by moojjoo

HTML

<div class="row">
            <div id="UseGradient" class="col-md-offset-4 col-md-8">
                <span id="UseGradient2"><input class="check-box" id="UseGradient" type="checkbox" /></span>
                Use Gradient?
            </div>
        <div id="primaryTopGradient" class="row">
            <div class="col-md-4 text-right">
                <strong>Primary Gradient Top</strong>
            </div>
            <div id="primaryGradientTopValue" class="col-md-7 auto-wrap">
                <div style="background-color: #; width:25px; float:left; margin-right:10px">&nbsp;</div>
                #
            </div>
            <div id="primaryGradientDisplay2" class="col-md-1 auto-wrap">
                &nbsp;
            </div>
        </div>
        <div id="primaryBottomGradient" class="row">
            <div class="col-md-4 text-right">
                <strong>Primary Gradient Bottom</strong>
            </div>
            <div id="primaryGradientBottomValue" class="col-md-7 auto-wrap">
                <div style="background-color: #; width:25px; float:left; margin-right:10px">&nbsp;</div>
                #
            </div>
            <div id="primaryGradientDisplay1" class="col-md-1 auto-wrap">
                &nbsp;
            </div>
        </div>        
        <div id="secondaryTopGradient" class="row">
            <div class="col-md-4 text-right">
                <strong>Secondary Gradient Top</strong>
            </div>
            <div id="secondaryGradienTopValue" class="col-md-7 auto-wrap">
                <div style="background-color: #; width:25px; float:left; margin-right:10px">&nbsp;</div>
                #
            </div>
            <div id="secondaryGradientDisplay2" class="col-md-1 auto-wrap">
                &nbsp;
            </div>
        </div>
        <div id="secondaryBottomGradient" class="row">
            <div class="col-md-4 text-right">
                <strong>Secondary Gradient Bottom</strong>
            </div>
   ...

JavaScript

$(document).ready(function(){ 

    
    
    $('#UseGradient').change(function() {
        $('#primaryBottomGradient').toggle(this.checked);
        $('#primaryTopGradient').toggle(this.checked);
        $('#secondaryBottomGradient').toggle(this.checked);
        $('#secondaryTopGradient').toggle(this.checked);
    });
    
});