JSFiddle - React, Tailwind, and code Playground

by mikeys4u

HTML

<form action="" method="get">
<fieldset class="switch">
    <label class="off">Off<input type="radio" class="on_off" name="on_off" value="off"/></label>
    <label class="on">On<input type="radio" class="on_off" name="on_off" value="on"/></label>
</fieldset>
<input type="submit" value="Submit"/>
</form>
<div class="result">The switch is: <span>on</span></div>

CSS

.switch{
  border:none;
  background:left no-repeat;
  width:105px;
  height:46px;
  padding:0;
  margin:0;
}

.on, .off{
  width:50px;
  height:40px;
  display:inline-block;
  cursor:pointer;
}

.result{display:none; margin-top:5px; font-size:14px; color:#333;}
.result span{color:#C03; font-weight:700;}

JavaScript

$(document).ready(function(){

    $('.switch').css('background', 'url("http://www.codehaven.co.uk/demos/switch.png")');
  $('.on_off').css('display','none');
  $('.on, .off').css('text-indent','-10000px');

    $("input[name=on_off]").change(function() {
      var button = $(this).val();
    
    if(button == 'off'){ $('.switch').css('background-position', 'right'); }
    if(button == 'on'){ $('.switch').css('background-position', 'left'); }   
          
     $('.result span').html(button); 
     $('.result').fadeIn();
   });
});