CSS - Button button YES-NO + Jquery acquisition button state.

A few days ago I suddenly told me that the manager can not do a switch button, filtering of an identity. To be honest, I was a senseless forced to do back-end state.

But a lot of online information, a check was found that a good case of man given imitate the success achieved on their own following summary:

Achieve the effect of the above, personally feel ugly burst.

Here is the process:

HTML part of the code:

<div class="testswitch">
    <input class="testswitch-checkbox" id="onoffswitch" type="checkbox">
 <label for="onoffswitch" class="testswitch-label">
 <span class="testswitch-inner" data-on="YES" data-off="NO"></span>
 <span class="testswitch-switch"></span>
 </label>
</div>

CSS part of the code:

.testswitch {
    position: relative;
    float: left;
    width: 45px;
    margin: 0;
    font-size: 0.6em;
}

.testswitch-checkbox {
    display: none;
}

.testswitch-label {
    display: block;
 overflow: hidden;
 cursor: pointer;
 border-radius: 20px;
}

.testswitch-inner {
 display: block;
 width: 200%;
 margin-left: -100%;
 transition: margin 0.3s ease-in 0s;
 text-align: left;
}

.testswitch-inner::before,
.testswitch-inner::after {
 display: block;
 float: right;
 width: 50%;
 height: 20px;
 padding: 0;
 line-height: 1.8em;
 font-size: 8px;
 color: white;
 font-family: Trebuchet, Arial, sans-serif;
 font-weight: bold;
 box-sizing: border-box;
}

.testswitch-inner::after {
 content: attr(data-on);
 padding-left: 10px;
 background-color: #FFAB47;
 color: #FFFFFF;
}

.testswitch-inner::before {
 content: attr(data-off);
 padding-right: 10px;
 background-color: #3F9FE8;
 color: white;
 text-align: right;
}

.testswitch-switch {
 position: absolute;
 display: block;
 width: 12px;
 height: 12px;
 margin: 4px;
 background: #FFFFFF;
 bottom: 5px;
 border-radius: 20px;
 transition: all 0.3s ease-in 0s;
 text-align: right;
}

.testswitch-checkbox:checked+.testswitch-label .testswitch-inner {
 margin-left: 0;
}

.testswitch-checkbox:checked+.testswitch-label .testswitch-switch {
 right: 0px;
}

Jquery part of the code:

referrer="NO";
$(document).ready(function () {
    $("#onoffswitch").on("click",function () {
        clickSwitch();
    });
    var clickSwitch=function () {
        if($("#onoffswitch").is(":checked")){
            console.log("YES");
            referrer="YES";
            $('.sp-start').css('display','none');
            $('.sp-close').css('display','block');
        }else {
            console.log("NO");
            referrer="NO";
            $('.sp-close').css('display','none');
            $('.sp-start').css('display','block');
        }
    }
});