JSFiddle - React, Tailwind, and code Playground

by Jake Wolpert

HTML

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

CSS

.switch-button-label {
    float: left;
    font-size: 10pt;
    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({
        'checked': true
    }).change(function(e,ui){
        var id =this.id;
        var checked=this.checked;
        var Id = $(this).data('id');
        
         console.log(e,ui,this);
        console.log(Id)
        console.log(id,checked);
    })

})