SwitchButton

A small (inline) switch with textlabels that replaces a checkbox. Mainly written in CSS and brought together in a lightweight jQuery plugin.

How to use:

Just include jQuery, the jQuery plugin and the CSS file. Then apply the plugin to one or more checkboxes on your webpage:

$("#myCheckbox").SwitchCheckbox();

By using the checked-attribute in the input-tag of the checkbox you can set the position of the switch.

Options:

You can use the following options in this plugin:

Name Type Values Default Description
type String round or something else round The style of your switch: either a small round (inline) switch or a bigger switch
onLabel String - ON The label highlighted when checked
offLabel String - OFF The label highlighted when unchecked
onComplete Function - None A function to be executed each times the switch is triggered

Example:

<script type="text/javascript" src="switchbutton.js" />
<link rel="stylesheet" type="text/css" href="switchbutton.css" />

<p>The small inline version <input type="checkbox" id="myCheckbox" /> of the checkbox</p>
<p>And the bigger button:</p>
<input type="checkbox" id="myCheckbig" checked />

<script>
$(function () {
 $("#myCheckbox").SwitchCheckbox({ onLabel: 'YES', offLabel: 'NO' });
 $("#myCheckbig").SwitchCheckbox({ type: 'box', onComplete: myFunction });
});

function myFunction () {
	alert('You toggled the switch!');
}
</script>
Result:

The small inline version of the checkbox

And the bigger button: