JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<script src="http://olance.github.io/jQuery-switchButton/jquery.switchButton.js"></script>
<div class="demo" id="basic">
    <input type="checkbox" value="1" checked>
</div>

CSS

.switch-button-label {
    float: left;
    font-size: 15pt;
    cursor: pointer;
}
.switch-button-label.off {
    color: #adadad;
}
.switch-button-label.on {
    color: #0088CC;
}
.switch-button-background {
    float: left;
    position: relative;
    background: #ccc;
    border: 1px solid #aaa;
    margin: 1px 10px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    cursor: pointer;
}
.switch-button-button {
    position: absolute;
    left: -1px;
    top : -1px;
    background: #FAFAFA;
    border: 1px solid #aaa;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}

JavaScript

$(function () {
    $("#basic").switchButton({
  width: 70,
  height: 20,
  button_width: 40
});
    
    $("#basic").switchButton().change(function () {
        
        console.log(this.checked);
    })
    setTimeout(function(){
        $("#basic").switchButton('option','checked', true);
    },5000)
})