Skip to content
A small (inline) switch with textlabels that replaces a checkbox. Mainly written in CSS and brought together in a lightweight jQuery plugin.
CSS JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
files
LICENSE
README.md

README.md

SwitchButton

A small (inline) switch with textlabels that replaces a checkbox. Mainly written in CSS and brought together in a lightweight jQuery plugin. For an example visit the demo page.

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:

NameTypeValuesDefaultDescription
typeStringround or something elseroundThe style of your switch: either a small round (inline) switch or a bigger switch
onLabelString-ONThe label highlighted when checked
offLabelString-OFFThe label highlighted when unchecked
onCompleteFunction-NoneA function to be executed each times the switch is triggered
Example: $("#myCheckbox").SwitchCheckbox({onLabel: 'YES', offLabel: 'NO', onComplete: callbackFunction });
You can’t perform that action at this time.