Чекбоксы в стиле iPhone с помощью jQuery

Первым делом в шапке документа подключаем фреймворк, стили и дополнительный скрипт:

Code:

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

Далее в любом месте документа вставляем, как обычно, чекбоксы. В примере показано 2 варианта (включенный и выключенный):

Code:

<h2>Выключено по умолчанию</h2>
<input type="checkbox" />
 
<h2>Включено по умолчанию</h2>
<input type="checkbox" checked="checked" />

На обработку формы, в которой будут использованы такие чекбоксы, это никак не влияет. Суть остается та же, меняется только внешний вид.

Есть небольшое отличие от iPhone: в телефоне необходимо перетаскивать слайдер, здесь же необходимо нажимать на необходимый вариант!