iPhone Style Radio and Checkbox Switches using jQuery and CSS

For my latest project, I created a great interface for an administration panel, complete with great looking forms and buttons. The one thing that stuck out like a sore thumb, however, were the ugly radio buttons and checkboxes I had to use repeatedly throughout the panel, so I decided to fix them. I found a few plugins that achieved what I wanted, however they were all pretty hefty in file size. My version doesn’t look as cool but makes up for it in file size, weighing less than 3kb and using only one image.

Download Files Now

The Effect in Action:


This is in an iframe, however you can also view the page itself. In my example, I left the actual input fields visible, in a real world use you should hide them using CSS. Feel free to reuse the source code, or follow the steps below:

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 (both included in the zip file). After you have those two files, follow the steps below:

Step 1 The HTML

1
2
3
4
5
6
7
8
9
10
11
<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>
<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" />
</p>

Step 2 The Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready( function(){
    $(".cb-enable").click(function(){
        var parent = $(this).parents('.switch');
        $('.cb-disable',parent).removeClass('selected');
        $(this).addClass('selected');
        $('.checkbox',parent).attr('checked', true);
    });
    $(".cb-disable").click(function(){
        var parent = $(this).parents('.switch');
        $('.cb-enable',parent).removeClass('selected');
        $(this).addClass('selected');
        $('.checkbox',parent).attr('checked', false);
    });
});

Step 3 The CSS

1
2
3
4
5
6
7
8
9
10
    .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; }

Alternatively, you could use a single hidden input field and change the value of it using JQuery. I used this method mainly to illustrate the effect works, as you can actually see the form values changing (to make sure it works).

I know it doesn’t have the fancy animation effects of the alternatives but give it a shot and let me know what you guys think!

Edit: If you look back a few posts, I mentioned that the new JQuery UI includes this functionality. While I considered it for this project, I didn’t need any of the other features offered by JQuery UI, so I opted to create my own simpler version (and save 30-40kb in file size).

Enjoyed the post?

Then you should follow me on Twitter or subscribe to the RSS feed.