aspdotnet-suresh offers articles and tutorials,csharp dot net, articles and tutorials,VB.NET Articles,Gridview articles,code examples of 2.0 /3.5,AJAX,SQL Server Articles,examples of .net technologies

jQuery Fancy Switch ON and OFF Effects Example

Jan 5, 2013
Here I will explain 
jQuery fancy switch on and switch off effects example in

In previous posts I explained jQuery Google Currency Converter API Example,
jQuery Highlight gridview rows on mouseover, jQuery Change style of controls, Show multiple months in datepicker, and many articles relating to JQuery and modal popup. Now I will explain how to implement fancy switch on and off using jQuery in

To implement this functionality we need to write the code like as shown below

<html xmlns="">
<title>jQuery UI Switch ON OFF</title>
<script src="" type="text/javascript"></script>
<style type="text/css">
background:left no-repeat;
.on, .off{
.result{display:none; margin-top:5px; font-size:14px; color:#333;}
.result span{color:#C03; font-weight:700;}
<script type="text/javascript">
$(document).ready(function() {
$('.switch').css('background', 'url("")');
$('.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);
<form id="form1" runat="server">
<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>
<input type="submit" value="Submit"/>
<div class="result">The switch is: <span>on</span></div>
By using above code we can implement switch on and off. If you want to know more about above code check original site jQuery fancy switch.

Live Demo

To check live demo click on below on and off switches

The switch is: on

If you enjoyed this post, please support the blog below. It's FREE!

Get the latest,, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email.

subscribe by rss Subscribe by RSS subscribe by email Subscribe by Email


Surendar Ganesan said...

Looks great .. Great work buddy ..

Anonymous said...

very nice

Manoj said...

Awesome Trick...

rams said...

wonderfulll sir...

veshesh kumar said...

Very good sir...........

srinu said...


I think it isn't working in ie8.


Suresh Dasari said...

it's working in all the browsers...........

Anonymous said...

Its only show 'ON' i.e The switch is: on when we click on 'OFF' It not Showing 'OFF' i.e The switch is: on

Suresh Dasari said...

i updated the code check it once demo is working fine now.

Sharaf Nedumballi said...


Ajay Agrawal said...

Awesome one.

Give your Valuable Comments

Other Related Posts

© 2015 All Rights Reserved.
The content is copyrighted to Suresh Dasari and may not be reproduced on other websites without permission from the owner.