Creating iPhone-style Checkboxes with jQuery and Prototype

Posted on August 9, 2009, under JavaScript, jQuery, Bookmark it

iPhone-style Checkboxes is a progressive enhancement for standard HTML checkboxes which transforms them into the beautiful iPhone toggle switches. The change is purely visual as the underlying checkbox is not touched. The usage of the iphone-style-checkboxes library is very simple. Unzip the downloaded package, place the JavaScript, images and stylesheet where you please. Make sure to update the stylesheet to point to the new location of your images, if they have changed relative to the stylesheet.

Once you are done with the files upload, the activation is very easy:

<head>
  <script src="jquery-1.3.2.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>

Elijah Miller is sharing the prototype version of this library with some additional features:

The initial version supported changing the ON/OFF label text; but if you made the text longer than a few characters, it would be hidden under the handle. UPDATE: The handle and label sizes are automatic based on the actual label text.
Support for dragging the control
Sliding labels
iPhone compatibility