JSFiddle - React, Tailwind, and code Playground

by Milan Karagunović

HTML

<button id="switch" class="on"></button>

<span></span>

CSS

#switch {
    width: 50px;
    height: 50px;
    border: none;
    outline: none;
    cursor: pointer;
}
.on {
    background: url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/checked_checkbox.png) no-repeat;
    background-size: contain;
}
.off {
    background: url(https://cdn1.iconfinder.com/data/icons/windows-8-metro-style/128/unchecked_checkbox.png) no-repeat;
    background-size: contain;
}


span {
    display: block;
    margin-top: 20px;
}

JavaScript

$(function() {

    $('#switch').click(function() {
        
        $(this).val('100'); // Set the value of your choice
        
        if($(this).hasClass('on')) {
           $(this).toggleClass('off','on');
           // Set the message of your choice and you can delete +$(this).val() after '
           $('span').text('Option A Selected and value is '+$(this).val());
        }
        if($(this).hasClass('off')) {
           $(this).val('200'); // Set the value of your choice
           // Set the message of your choice and you can delete +$(this).val() after '
           $('span').text('Option B Selected and value is '+$(this).val());
        }        
                
               
    });

});