iPhone-style Checkboxes for Prototype

Big thanks to Elijah Miller for stepping up and finishing the work on the Prototype version of the iPhone-style checkboxes. Elijah now has write-access to the official repository at GitHub and will be maintaining it alongside my jQuery version.

Examples

A checkbox defaulting to checked
A checkbox defaulting to unchecked

Download and implement

As with the jQuery version, 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="prototype.js" type="text/javascript"></script>
  <script src="scriptaculous.js" type="text/javascript"></script>
  <script src="prototype/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.observe("dom:loaded", function() {
      new iPhoneStyle('input[type=checkbox]');
    });
  </script>
</head>

The initialization method takes a handful of options.

For example:

:::Javascript
new iPhoneStyle('input[type=checkbox]', {
  checkedLabel: 'YES',
  uncheckedLabel: 'NO'
});
A checkbox defaulting to checked
A checkbox defaulting to unchecked

Original version and Contributing

You can read about the original jQuery version here. Both versions are maintained using GitHub: http://github.com/tdreyno/iphone-style-checkboxes

Comments?

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