iPhone Style Radio and Checkbox Switches using JQuery and CSS

From DevGrow, a blog about designing, developing and growing your website.

The Example:

enable disable


The Prerequisites

You need just two things for this to work correctly: JQuery 1.3.2+ and the switch.gif image file used for the backgrounds.

Step 1 The HTML

	<p class="field switch">
		<input type="radio" id="radio1" name="field"  checked />
		<input type="radio" id="radio2" name="field" />
		<label for="radio1" class="cb-enable selected">>span>Enable</span></label>
		<label for="radio2" class="cb-disable"><span>Disable</span></label>
	<p class="field switch">
		<label class="cb-enable"><span>On</span></label>
		<label class="cb-disable selected"><span>Off</span></label>
		<input type="checkbox" id="checkbox" class="checkbox" name="field2" />

Step 2 The Javascript

	$(document).ready( function(){ 
			var parent = $(this).parents('.switch');
			$('.checkbox',parent).attr('checked', true);
			var parent = $(this).parents('.switch');
			$('.checkbox',parent).attr('checked', false);

Step 3 The CSS

	.cb-enable, .cb-disable, .cb-enable span, .cb-disable span { background: url(switch.gif) repeat-x; display: block; float: left; }
	.cb-enable span, .cb-disable span { line-height: 30px; display: block; background-repeat: no-repeat; font-weight: bold; }
	.cb-enable span { background-position: left -90px; padding: 0 10px; }
	.cb-disable span { background-position: right -180px;padding: 0 10px; }
	.cb-disable.selected { background-position: 0 -30px; }
	.cb-disable.selected span { background-position: right -210px; color: #fff; }
	.cb-enable.selected { background-position: 0 -60px; }
	.cb-enable.selected span { background-position: left -150px; color: #fff; }
	.switch label { cursor: pointer; }
	.switch input { display: none; }


While this should work in all major browsers, it has only been tested on: Firefox 3.5+, IE7+, Chrome 4.1+, Opera 9.6+, Safari 4+


This resource is released under GPL - share at will!

- Monji, from DevGrow