JQuery On/Off Switch

This scripts transforms standard html checkboxes into animated switches.

This is done by hiding the checkbox and instead displaying a custom switch widget. When the switch is checked or unchecked, the checked state of the checkbox will be updated automatically so that you can use it in form inputs as you with with a standard checkbox.

Demo

License

Apache Free License 2.0

Download

Download on-off-switch.zip

Or from Github: https://github.com/DHTMLGoodies/jquery-on-off-switch

Examples/Demos

Manual Configuration

With custom size and color

Before and after demo:

Click here to transform the checkbox above.

These switches have been created automatically by class names

Configuration

Include files

Example:

<script type="text/javascript" src="js/jquery-1.11.2.min.js"> </script>
<script type="text/javascript" src="js/on-off-switch.js"> </script>
<link rel="stylesheet" type="text/css" href="css/on-off-switch.css"/>

Step 2: Add one or more checkboxes or hidden inputs which will be converted to a switch.

Example:

<input type="checkbox" id="id-of-checkbox" checked name="check1">
<!-- value="1" for checked, value="0" for unchecked -->
<input type="hidden" id="id-of-hidden" value="1" name="hidden">

Step3: Configure the switch

These are the options you can configure:

• el: References to a checkbox or hidden input field, example: el:"#id-of-checkbox" for <input type="checkbox" id="id-of-checkbox"> value="1" checked>.
• textOn: Optional text when checked
• textOff: Optional text when unchecked
• height: Optional height in pixels of the switch(default = 30)
• width: Optional width in pixels of the switch. If not set, width will be calculated based on text widths(textOn, textOff)
• trackColorOn: Track background color when checked (default = green).
• trackColorOff: Track background color when unchecked (default = light gray).
• textColorOn: text color of textOn.
• textColorOff: text color of textOff.
• listener: Optional function to call on change. Arguments: name of checkbox and checked(true|false).
  Example:
  listener:function(name, checked){ alert("Name: " + name + " - checked: " + checked); }
• trackBorderColor: Optional border color for the background.
• textSizeRatio: Size of text relative to height of switch (default = 0.4).

Example code:

<script type="text/javascript">
new DG.OnOffSwitch({
   el: '#id-of-checkbox',
   textOn: 'Yes',
   textOff: 'No',
   height:40,
   trackColorOn:'#F57C00',
   trackColorOff:'#666',
   textColorOff:'#fff',
   trackBorderColor:'#555'
});
</script>

Convert Multiple checkboxes.

The DG.OnOffSwitch is used to convert a single checkbox into a switch. You also have DG.OnOffSwitchAuto which is used to convert many checkboxes at once. This is how you do it:

Step 1: give all your checkboxes a css class.

Example:

<input type="checkbox" class="custom-switch" checked name="check1">
<input type="checkbox" class="custom-switch" name="check2">
<input type="checkbox" class="custom-switch" checked name="check4" data-text-on="On" data-text-off="Off">

Step 2: Call DG.OnOffSwitchAuto.

<script type="text/javascript">
   new DG.OnOffSwitchAuto({
   cls:'.custom-switch',
   textOn:'Yes',
   textOff:'No'
});
</script>

Specify the CSS class name of your checkboxes using the cls attribute. Then configure the switches using the same configuration options as for DG.OnOffSwitch shown above.

If you need individual styling/texts for some of the switches, use custom html properties like data-textOn and data-textOff, i.e. the property name prefixed by data-

Example:

<input type="checkbox" class="custom-switch" checked name="check4" data-textOn="On" data-textOff="Off">

Methods:

The following public methods are available:

• toggle: Toggles the checked state of the switch.
• check: Set the switch to checked.
• uncheck: Set the switch to unchecked.
• getValue: Returns true when checked, false otherwise.

The script will also listen to the jQuery event "click". Example:

Access a specific checkbox using code:

The automatically created checkboxes can be access with code using the syntax:

DG.switches("name-of-checkbox") // or DG.switches("#id-of-checkbox")

Where name-of-checkbox is the name attribute of the native checkbox, example:

<input type="checkbox" name="name-of-checkbox" class="custom-switch" id="id-of-checkbox">

To access it by id, use the # prefix.

Then you can call the methods above on this object:

DG.switches["#id-of-checkbox"].toggle();
DG.switches["name-of-checkbox"].check();
DG.switches["name-of-checkbox"].uncheck();

Comments

1 2 3 4 5

Hi. This is an awesome tutorial. But the zip file dosent unzip. plz help

mani at 04:49PM, 2015/09/24.

1 2 3 4 5

MANI,This issue has now been resolved. Seems to be a problem with my iZip on Mac.thanks for notifying me of this.

DHTMLGoodies at 04:29PM, 2015/09/28.

1 2 3 4 5

Hi! Thank you for this control. Is it possible to programatically change the value? I tried with $('#chkBloq').check() but returns undefined.Thank you!

Kiw at 02:52PM, 2016/02/08.

Admin comment

1 2 3 4 5

KIW,I have made some updates to the script now.The script will listen to jQuery click events. Example:$("#chkBloq").click();This will toggle the switch.Calling $("#chkBloq").check() won't work because it references the native <input type="checkbox">. You can however use the new accessors:DG.switches("#chkBloq").check();Where DG.switches is a cache array of all the checkboxes.

DHTMLGoodies at 12:45PM, 2016/02/09.

1 2 3 4 5

Great! Now it is working right. <p>Just a little thing. For me it is working with DG.switches.chkBloq.check(); and not with DG.switches("#chkBloq").check(); </p> <p>Thank you very much!</p>

KIW at 04:09PM, 2016/02/09.

1 2 3 4 5

HELP PLEASE!!!new DG.OnOffSwitch({ el: '.js-candlestickunlim', height: 20, width:60, trackColorOn:'#31aa3a', trackColorOff:'#e40079', trackBorderColor:'#ffffff', listener:function(name, checked){ console.log(name+" "+checked); var str = $("#tofreezblokunlimout").html(); vex.dialog.buttons.YES.text = 'Ok'; vex.dialog.buttons.NO.text = 'Отмена'; vex.dialog.confirm({ message:str, callback: function(value) { console.log(value) if(value==true){ console.log("freezblokon"); $(".freezblokunlim").removeClass("freezblokff"); $(".freezblokunlim").addClass("freezblokon"); $(".freezcounterslidinntxtunlim").html("вкл") }else{ //!HOW HERE MAKE uncheck .js-candlestickunlim???? //DG.switches("#chkBloq").check(); //DG.switches is not a function } return true; } }); }});

Dima at 01:19PM, 2016/03/28.

Admin comment

1 2 3 4 5

DIMA,Do you have a <script> reference toon-off-switch-onload.jsin your code?i.e. <script type="text/javascript" src="js/on-off-switch-onload.js"></script>

DHTMLGoodies at 01:02PM, 2016/03/29.

1 2 3 4 5

Hi, DHTMLGoodies. Thx for answer.I want to make modal window(vex - jquery plugin).When I toggle switcher, window ask me: "are you sure...."if I press "yes" button switch in another position, if "no" don't switch.Sorry for my english.<!DOCTYPE html><html lang="en"><head>....</head><body>....<input class="js-candlestickunlim" id="id-js-candlestickunlim" type="checkbox" name="candlestickunlim" checked="checked">....<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script><script src="assets/js/bootstrap.min.js"></script>......<script src="assets/js/on-off-switch.js"></script><script src="assets/js/on-off-switch-onload.js"></script><script src="assets/js/vex.combined.min.js"></script><script>vex.defaultOptions.className = 'vex-theme-flat-attack';</script>........<script>$(document).ready(function() { ..... new DG.OnOffSwitch({ el: '.js-candlestickunlim', ..... }); ......});</script></body></html>

Dima at 02:46PM, 2016/03/29.

Admin comment

1 2 3 4 5

DIMA,You are calling DG.switches() as a function (with parenthesis). To make it work, you'll need to call it as an object, i.e.DG.switches["candlestickunlim"]...i.e. using square brackets instead of parenthesis.

DHTMLGoodies at 08:10AM, 2016/03/30.

1 2 3 4 5

Nice tool. Thanx.Please change documentation above:DG.switches("#id-of-checkbox").toggle();DG.switches("name-of-checkbox").check();DG.switches("name-of-checkbox").uncheck();Should be:DG.switches["#id-of-checkbox"].toggle();DG.switches["name-of-checkbox"].check();DG.switches["name-of-checkbox"].uncheck();

Neil A Alan at 06:19PM, 2016/04/02.

1 2 3 4 5

Does not play well with other plug-ins.My slider and knob control animations stopped working once I put the on-off switch into my project.

Neil A Alan at 07:32PM, 2016/04/02.

Admin comment

1 2 3 4 5

Neil,I have updated the documentation. Thanks for notifying me of this.Do you have any example url where I can look at the problem with your other controls?---Alf

DHTMLGoodies at 11:38AM, 2016/04/04.

1 2 3 4 5

Hi there

i need help please , i have html page that contain checkBox

that call function ,,




i need to convert it into switch ,, But I can't assign NAME or Call onclick Function .

the switch code


<tr >

<td style="font-size:30px ; padding: 10px 10px 15px 0px; ">
<i > LED1
</td >

<td >
<input type="checkbox" checked="far-right" data-toggle="switch" />
</td >
</tr>

LED1

please help me please .

shehab at 02:43PM, 2016/04/04.

1 2 3 4 5

What is DG ? It throws an error 'DG not defined'. Can someone help on this

Santosh at 11:37AM, 2016/04/25.

1 2 3 4 5

Santosh,DG is just a Javascript namespace. If you get an error that it's undefined, please check that you have referenced the javascript files correctly (<script src="... as shown above)

DHTMLGoodies at 01:00AM, 2016/05/08.

1 2 3 4 5

Scroll function, javascript click functions not working after placing on/of js into tab version in my project

Chaitanya Bendalam at 10:17AM, 2016/08/02.

Admin comment

1 2 3 4 5

Chaitanya Bendalam wrote: #
Scroll function, javascript click functions not working after placing on/of js into tab version in my project


I can't find anything in the On/Off Switch code which could cause this problem? Do you seen any error messages or do you have a link to a page where this problem exists?

---
Alf

DHTMLGoodies at 08:59AM, 2016/08/05.

Admin comment

1 2 3 4 5

The problem with scrolling on mobile devices has been resolved today.

DHTMLGoodies at 10:04AM, 2016/08/08.

1 2 3 4 5

as I can try ?, disabled control disabled and within a div disable but I can not , that way I can disable it

therock at 01:56PM, 2016/09/16.

1 2 3 4 5

Can I integrate that into this library: https://github.com/shieldui/shieldui-lite so the native switch looks like yours? I really like it!

WIlliam Monroe at 12:42PM, 2016/09/19.

Admin comment

1 2 3 4 5

WIlliam Monroe wrote: #
Can I integrate that into this library: https://github.com/shieldui/shieldui-lite so the native switch looks like yours? I really like it!

William,

Yes, you may integrate it into the library.

DHTMLGoodies at 12:28PM, 2016/10/03.

1 2 3 4 5

Can i change color of the On / off state with jquery?

Joan at 04:01PM, 2017/12/28.

1 2 3 4 5

Hi DHTMLGOODIES,
Thx for this fantastic tool. It works great for me.
Is there a way to disable the switch ?
Thx for your answer.

BR

Khaled SAIDI at 09:40AM, 2019/02/15.

1 2 3 4 5

I am having strange behavior when using on/off toggles from chrome on android. A single tap on the slider causes it to call the callback function multiple times ( up to 4) times leaving the end state unchanged. If I click and hold and slide the slider it calls the callback funtion just once and changes the value. But would be nice if it would treat a single tap as one click -- like it does when I click on items with mouse on the desktop chrome version.

Any ideas?

I'm calling the onload.js AND then in my doc ready binding my functions based on class to create many switches with same class.

<script type="text/javascript" src="js/on-off-switch.js"></script>
<script type="text/javascript" src="js/on-off-switch-onload.js"></script>
<link rel="stylesheet" type="text/css" href="css/on-off-switch.css"/>


DG.OnOffSwitchAuto({
cls:'.custom-switch',
textOn:'ON',
textOff:'OFF',
listener:function(name, checked){ xajax_update_mail_prefs($('#email').val(),$('#mail_id').val(),name,checked); }
});

KEVIN MEEK at 03:54AM, 2019/02/20.

Post your comment

Your name:
Your email:
Your website:
Don't have an avatar? Create one at Gravatar.com.

 

Confirmation code:

Please wait...

Comment preview:

Type some text to see comment preview...

Anonymous at 22:16, 04-26-2024.