JSFiddle - React, Tailwind, and code Playground

by delboy1978uk

HTML

<h1>Flip that switch!</h1>
<p>switching off doesnt seem to remove checked attribute, animation screws up and always resets to off</p>
		rock  &nbsp;&nbsp;&nbsp;
		<input type="checkbox" id="1" class="switch">
			<br>
		roll  &nbsp;&nbsp;&nbsp;
		<input type="checkbox" id="2" class="switch">
			<br>
		swing  &nbsp;&nbsp;&nbsp;
		<input type="checkbox" id="3" class="switch" checked="checked">

JavaScript

(function($){
	$.fn.extend({ 
		lightSwitch: function(options)
		{

			//set default options
			var defaults = 
			{
				animSpeed : 120,
				hoverSpeed : 100,
				switchImg : 'http://img.ctrlv.in/img/51c273c857962.png',
				switchImgCover: 'http://img.ctrlv.in/img/51c27406d686e.png',
				switchImgCoverWidth : '63px',
				switchImgCoverHeight : '18px',
				disabledImg : 'flipswitch/disabled',
				onShift : '0px 0px',
				offShift : '-37px 0px',
				peekOff : '-6px 0px',
				peekOn : '-31px 0px'
			};

			//override default options with user set options
			var options = $.extend(defaults, options);
	
    		//do this for each flipswitch
    		return this.each(function() 
    		{

    			var o = options;
				var obj = $(this);

				//if the checkbox is disabled
				if($(this).attr('disabled'))
				{
					//display the disabled switch
					$(this).css({'display':'none'}).after('<span><img src="'+o.disabledImg+'" /></span>');
				}
				else
				{	
					//display the switch cover image		
					$(this).css({'display':'none'}).after('<span class="switch"><img src="'+o.switchImgCover+'" width="'+o.switchImgCoverWidth+'" height="'+o.switchImgCoverHeight+'" /></span>'); //'display':'none'
				}

				// add the actual switch as the background image
				$(this).next('span.switch').css({'display':'inline-block','background-image':'url("'+o.switchImg+'")','background-repeat':'no-repeat','overflow':'hidden','cursor':'pointer','margin-right':'2px'});

				
				//do this when the switch gets clicked
				$(this).next('span.switch').click(function()
				{
					// If we click radio button, we need to animate the other switches off
					if($(this).prev().is(':radio'))
					{
						radioGroupName = $(this).prev().attr('name');
                        //animate
						$('input[name="'+radioGroupName+'"]'+':checked + span').stop().animate({'backgroundPosition':o.offShift},o.animSpeed);
					}

					// if the switch is on
					if($(this).prev().is(':checked'))
					{
                       ...