CSS3 Activate/Deactivate Switch

HTML

<article class="change-state">
        <input type="checkbox" class="change-state-button-checkbox" id="change-state-button-checkbox">
        <label class="button-overlay" for="change-state-button-checkbox"></label>
        <div class="state-indicator">
            <input type="checkbox" name="state-indicator" class="state-indicator-checkbox">
		    <label class="state-indicator-label">
                <div class="state-indicator-inner"></div>
            </label>
            <label class="change-state-button" for="change-state-button-checkbox">
                <div class="change-state-button-text"></div>
            </label>
		</div>
    </article>

CSS

/* Active/Inactive state indicator */
.change-state-button {
    position: absolute;
    background-color: #3A8686;
    background-image: url('../images/power.gif');
    background-size: 25px 25px;
    background-repeat: no-repeat;
    background-position: 7px 7px;
    height: 38px;
    width: 38px;
    top: 0px;
    right: 0px;
    margin: 6px;
    color: white;
    float: right;
    z-index: 10;
    cursor: pointer;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-transition: background-color 0.2s ease-in-out, width 0.1s ease-in;
    -moz-transition: background-color 0.2s ease-in-out, width 0.1s ease-in;
    -o-transition: background-color 0.2s ease-in-out, width 0.1s ease-in;
}
.change-state-button-checkbox {
    display: none;
}
.change-state-button-text:before {
    padding-left: 6px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    display:block;
    line-height: 38px;
    font-size: 15px;
    color: white;
    font-family: Trebuchet, Arial, sans-serif;
    font-weight: bold;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.change-state-button-checkbox:checked ~ .state-indicator .change-state-button .change-state-button-text:before {
    color: #f0f0f0;
    padding-left: 6px;
    font-size: 15px;
}
.change-state-button-checkbox:checked ~ .button-overlay {
    display: block;
}
.state-indicator {
    position: relative;
    width: 100%;
    cursor: default;
}
.state-indicator-checkbox {
    display: none;
}
.state-indicator-label {
    display: block;
    overflow: hidden;
    border: 2px solid #FFFFF;
    border-radius: 2px;
    cursor: default;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
.state-indicator-inner {
    width:...

JavaScript

$(".change-state-button").on('click', function() { 
    var $onoffswitch = $('.state-indicator-checkbox');
    if ($('.change-state-button-checkbox').is(':checked')) {
        $onoffswitch.prop('checked', !$onoffswitch.prop('checked'));
    }
});