<div class="center">
  <div id="switch"></div>
  <div id="switch1"></div>
  <div id="switch2"></div>
</div>

<footer>
<span>jQuerry Switch Class</span>
</footer>

body {
    background-color: #9b59b6;
}

footer {
    position: absolute;
    left: 0px;
    bottom: 10px;
    width: 100%;
    text-align: center;
    margin-bottom: 0px;
    
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-weight: 300;
    color: #bdc3c7;
    min-width: 160px;
}

.center {
    display: inline-block;
    margin-top: 40vh;
    margin-left: 50%;
    transform: translate(-50%, 0);
}

.switch {
    margin: 10px;
    vertical-align: middle;
}

.hr {
    margin-top: 5px;
    margin-bottom: 5px;
    height: 1px;
    width: 100%;
    background-color: #bdc3c7;
}

/*
//     =========================
//     == jQuery Switch Class ==
//     =========================
*/

$(document).ready(function() {
    var cbxSwitch = new CheckboxSwitch('#switch', true, 60, 34);
    var cbxSwitch1 = new CheckboxSwitch('#switch1', false, 60, 17);
    var cbxSwitch2 = new CheckboxSwitch('#switch2', false, 60, 60);
    
    cbxSwitch.setActiveColor('limegreen');
    cbxSwitch.setInactiveColor('lightgrey');
    
    cbxSwitch1.setActiveColor('#e74c3c');
    cbxSwitch1.setInactiveColor('#e67e22');
});

$('head').append('<style>.switch{position:relative;display:inline-block;width:60px;height:34px}.switch input{display:none}.slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;-webkit-transition:.4s;transition:.4s}.slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:white;-webkit-transition:.4s;transition:.4s}input:checked+.slider{background-color:#2196f3}input:focus+.slider{box-shadow:0 0 1px #2196f3}input:checked+.slider:before{-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px)}.slider.round{border-radius:34px}.slider.round:before{border-radius:50%}</style>');

function CheckboxSwitch(id, round, width, height) {
    var self = this;
    this.switchID = id;
    this.round = round;
    this.width = width;
    this.height = height;
    this.active = '#2196f3';
    this.inactive = '#ccc';
    
    $('head').append('<style>' + this.switchID + '{display:inline-block;}' + this.switchID + ' .switch{width:' + this.width + 'px;height:' + this.height + 'px;}' + this.switchID + ' .slider:before{height: ' + String(this.height-8) + 'px;width: ' + String(this.height-8) + 'px;}' + this.switchID + ' input:checked + .slider:before{-webkit-transform: translateX(' + String(this.width-this.height) + 'px);-ms-transform: translateX(' + String(this.width-this.height) + 'px);transform: translateX(' + String(this.width-this.height) + 'px);}' + this.switchID + ' .slider.round{border-radius: ' + this.height + 'px;}</style>');
    
    $(this.switchID).bind('touchstart mousedown', function(e){
        $(self.switchID + ' input').prop('checked', !$(self.switchID + ' input').prop('checked'));
    });
    
    $(this.switchID).on('click touchend', function (e) {
        e.preventDefault();
        return false;
    });
    
    if(this.round) {
        $(this.switchID).html('<label class="switch"><input type="checkbox"><div class="slider round"></div></label><style id="_' + this.switchID.replace('#', '') + '_"></style>');
    } else {
        $(this.switchID).html('<label class="switch"><input type="checkbox"><div class="slider"></div></label><style id="_' + this.switchID.replace('#', '') + '_"></style>');
    }
}

CheckboxSwitch.prototype.setActiveColor = function(color) {
    this.active = color;
    $('#_' + this.switchID.replace('#', '') + '_').html(this.switchID + ' .switch input:checked+.slider{background-color:' + this.active + '}' + this.switchID + ' .switch .slider{background-color:' + this.inactive + '}');
};

CheckboxSwitch.prototype.setInactiveColor = function(color){
    this.inactive = color;
    $('#_' + this.switchID.replace('#', '') + '_').html(this.switchID + ' .switch input:checked+.slider{background-color:' + this.active + '}' + this.switchID + ' .switch .slider{background-color:' + this.inactive + '}');
}