Convert a checkbox or multiple checkboxes into iphone style switches. This is based on the jQuery iphoneSwitch plugin by Daniel LaBare.

Features

• Because checkboxes are used, this is compatable with having javascript off for form submission.
• Affects only checkboxes.
• Synchronizes the actual state of the checkbox for on or off status.
• Completely self-contained for each checkbox.
• Changes fire the onchange event of your checkbox.
• Relies purely on css for styling... no passing anything but your slider image.
• Because functionality is decoupled from CSS, you can assign custom CSS classes if you wish making it possible for multiple version per page.
• Completely inline like a normal checkbox. No sliding-door-float madness.
• Can show or hide the original checkbox depending on settings.

To achieve this, a <span> tag is created around the checkbox. An <img> is then appended inside of this <span>. Finally, the checkbox <input> is optionally hidden. The <span> tag can be styled any way you wish. It is simply a container for the rest. The actual sliding image is assigned to the created <img> via the "background-image" CSS property and its animation is controlled programatically via the "background-position" CSS property.

Syntax

iCheckbox has the following syntax:

var options = {
	switch_container_src: 'images/bpm-frame.gif',
	class_container: 'iCheckbox_two_container',
	class_switch: 'iCheckbox_two_switch',
	class_checkbox: 'iCheckbox_two_checkbox',
	switch_speed: 450,
	switch_swing: -18,
	checkbox_hide: false
	};
var initial_state = "off";
$('.some_checkbox').iCheckbox( initial_state, options );

You can view a demo of the plugin here

The plugin can also be found on the jQuery Site's page for it.