Introducing iPhone-style Checkboxes

Ever wanted those flash iPhone on/off toggle switches on your webpage? Love jQuery? Well then I’ve got something special for you. iphone-style-checkboxes implements the iPhone toggles as replacements for standard HTML checkboxes. Simply run the script and your site will be updated with these specialized controls. Best of all, the underlying checkbox is not touched and backend system will never know the difference. The change is purely visual.

UPDATED: Now with Prototype-based version here.

Examples

A checkbox defaulting to checked
A checkbox defaulting to unchecked

Download and implement

In keeping with the jQuery philosophy, using the iphone-style-checkboxes library is very simple. Download the package, unzip it and place the javascript, images and stylesheet where you please. You’ll need to update the stylesheet to point to the new location of your images if they have changed relative to the stylesheet.

Once the files are available to your site, activating the script is very easy:

:::HTML
<head>
  <script src="jquery-1.4.js" type="text/javascript"></script>
  <script src="jquery/iphone-style-checkboxes.js" type="text/javascript"></script>
  <link rel="stylesheet" href="path_to/style.css" type="text/css" media="screen" />
  <script type="text/javascript">
    $(document).ready(function() {
      $(':checkbox').iphoneStyle();
    });
  </script>
</head>

The initialization method takes a handful of options.

For example:

:::Javascript
$(':checkbox').iphoneStyle({
  checkedLabel: 'YES',
  uncheckedLabel: 'NO'
});
A checkbox defaulting to checked
A checkbox defaulting to unchecked

Contribute

The source is available, and forkable, on GitHub at http://github.com/tdreyno/iphone-style-checkboxes. Please direct comments, support requests, bug reporting and pull requests to there.

Comments?

Let me know at thomas@awardwinningfjords.com and I'll amend the article as necessary.