iCheckbox - Inspired Checkbox v0.1

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


Here's a sample checkbox slider control using the default CSS classes and Daniel LaBare's original images: . This one actually controls the display of the "debug" messages used for our examples on this page (Firebug console messages and, failing that, alert() boxes).

Here's another slider control using CSS classes assigned at creation with a custom look and the corresponding checkbox still visible: . This slider does nothing more than send "debug" messages.


To aceive 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.


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 );

Option List