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

Bookmark and Share

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:

Available Offline

Click here to transform the checkbox above.

These switches have been created automatically by class names

Option One
Option Two
Option Three
Option Four with custom html attributes

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:

<input type="checkbox" name="on-off-switch-demo6" class="custom-switch" id="on-off-switch-demo6">
<a href="#" onclick="$('#on-off-switch-demo6').click();return false">Execute $('#on-off-switchdemo6').click()</a>

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

mani
Hi. This is an awesome tutorial. But the zip file dosent unzip. plz help
mani at 04:49PM, 2015/09/24.
DHTMLGoodies
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.
Kiw
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
DHTMLGoodies
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.
KIW
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.
Dima
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
DHTMLGoodies
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.
Dima
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
DHTMLGoodies
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.
Neil A Alan
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.
Neil A Alan
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
DHTMLGoodies
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.
shehab
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.
Santosh
What is DG ? It throws an error 'DG not defined'. Can someone help on this
Santosh at 11:37AM, 2016/04/25.
DHTMLGoodies
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.
Chaitanya Bendalam
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
DHTMLGoodies
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
DHTMLGoodies
The problem with scrolling on mobile devices has been resolved today.
DHTMLGoodies at 10:04AM, 2016/08/08.
therock
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.
WIlliam Monroe
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
DHTMLGoodies
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.
Murali
<a href="#comment5025">KIW wrote:</a>
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>


Good job! saved my day!!!
Murali at 05:39AM, 2017/04/04.

Post your comment

Don't have an avatar? Create one at Gravatar.com.

Confirmation code:

Go to cbolson.com


About/Contact | A good idea? | Submit a script | Privacy notice
© 2005 - 2017 dhtmlgoodies.com