Transform Checkbox Into Toggle Switch - jQuery switchify

switchify is a simple, lightweight jQuery plugin that transforms the regular checkbox input into iOS style toggle switches with a single JS call.

See Also:

• 10 Best Toggle Switches In JavaScript & Pure CSS
• 10 Best Custom Checkbox And Radio Input Replacements

How to use it:

1. Add references to jQuery library and the switchify plugin's files.

<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>

<!-- switchify -->
<link rel="stylesheet" href="/path/to/src/switchify.css">
<script src="/path/to/src/switchify.js"></script>

2. Initialize the plugin on the checkbox input and done.

<input class="toSwitch" id="option1" type="checkbox" name="option1" checked />
<input class="toSwitch" id="option2" type="checkbox" name="option2" checked />
<input class="toSwitch" id="option3" type="checkbox" name="option3" />
...

$(function(){
  $('input[type=checkbox]').switchify();
});

3. Override the default styles of the switch.

label.switchify.switchify-label {
  display: inline-block;
}

label.switchify.switchify-label > input.switchified {
  display: none;
}

label.switchify.switchify-label > span.switchify-switch {
  display: block;
  background-color: #cecece;
  height: 1em;
  width: 1.6em;
  position: relative;
  border: 1px solid #cecece;
  border-radius: 1em;
  transition: background-color 0.25s, border-color 0.25s;
}

label.switchify.switchify-label > span.switchify-switch::after {
  content: "";
  background-color: #fff;
  display: block;
  height: 1em;
  width: 1em;
  position: absolute;
  border-radius: 1em;
  left: 0;
  transition: left 0.25s;
}

label.switchify.switchify-label > input.switchified:checked + span.switchify-switch {
  background-color: #4bcc23;
  border-color: #4bcc23;
}

label.switchify.switchify-label > input.switchified:checked + span.switchify-switch::after {
  left: calc(100% - 1em);
}

---

This awesome jQuery plugin is developed by borjagq. For more Advanced Usages, please check the demo page or visit the official website.