Toggle Switch

Toggle Switch is a lightweight jQuery plugin which creates tiny and easy to use toggle buttons.

It is a visual element which can be a replacement for standard HTML checkboxes.

Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.

The plugin is image free which means that the download size is quite small.

The following features are included in Progress Bar:

Ease of use
Image Free
Keeps the underlying checkbox untouched
Smooth movement
Optional Parameters

Step 1:

Pack Your Bags

Download Toggle Switch
Add the following markup to your document <head>
You’ll have everything you need to convert standard HTML checkboxes to Toggle Switch.


/* Attach the Toggle Switch CSS file */
<link rel=" stylesheet" type="text/css" href="css/tinytools.toggleswitch.min.css">
/* jQuery needs to be attached */
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
/* Then attach the Toggle SWitch plugin */
<script src="tinytools.toggleswitch.min.js"></script>

Step 2:

Cosider the required space for Toggle Switch(es)

There is no need to add any element to your HTML code as the place holder for the Toggle Switch(es). Your selected checkboxes will be visually converted to Toggle Switch(es). You just need to consider that the size of the element is bigger than the checkboxs.


<input type="checkbox" id="ToggleSwitchSample" />

Step 3:

Start The Engine

Put the following code in the ready event of your document to visually convert the selected checkbox(es) to Toggle Switche(es):


<script>
	$(document).ready(function () {
		$("#ToggleSwitchSample").toggleSwitch();
	});
</script>

That's all. You changed a checkbox to a Toggle Switch as simple as 1-2-3. Optionally, you can pass the setting options to the toggleSwitch() method.

Optional Parameters

Property	Default	Description
width	"100px"	The width of the toggle switch.
height	"20px"	The height of the toggle switch.
onLabel	ON	The text of the "ON" state.
offLabel	OFF	The text of the "OFF" state.
onToggle	false	callback that fires after changeing the state of the toggle switch. Parameters: 1- Check state, 2- Caller. Alternatively, you can use the default onChange event of the underlying checkbox.

Methods

Method	Description
$(selector).toggleCheckedState(value)	On or off the selected toggle switch(es). The value parameter can be true or false. It also changes the underlying checkbox checked value. Alternatively, you can change the underlying checked value using the $(selector).prop('chacked', '<value>'); Notice: The $(selector).attr('chacked', '<value>'); will not work properly.