Convert Checkbox Into iOS-style Switch Using jQuery

A really small jQuery snippet that converts checkboxes into iOS-style toggle buttons (also called switch control) while preserving the native check and uncheck functions.

How to use it:

1. Add the following HTML next to the checkbox input.

<input type="checkbox" name="switch" />
<div class="customcheck">
  <div class="checkitem"></div>
</div>

2. Hide the original checkbox.

input[name="switch"]{
  display:none;
}

3. Customize the appearance of the switch control.

.customcheck {
  width: 80px;
  height: 20px;
  border: 3px solid #BDBDBD;
  border-radius: 20px;
  background: #d8d8d8;
}

4. Customize the appearance of the thumb.

/* styles when inactive */
.checkitem {
  width: 14px;
  height: 14px;
  border-radius: 16px;
  border: 2px solid #484848;
  background-color: #696969;
  margin: 1px;
  margin-left: 2px;
  transition: all 0.5s ease;
}

/* styles when active */
.itemactive{
  margin-left: 60px;
  border: 2px solid #0ebd0e;
  background-color: #24da24;
}

4. Include the latest jQuery library (slim build is recommended for better performance).

<script src="/path/to/cdn/jquery.slim.min.js"></script>

5. The jQuery script to activate the switch control.

$(".checkitem").click(function(){
  var item = $(".checkitem");
  if (item.hasClass("itemactive")){
    // It is activated. Deactivate it!
    item.removeClass("itemactive");
    $(".customcheck").css("background-color", "#d8d8d8")
    $("input[name='switch']").prop("checked", false);
  } else {
    // It's deactivated. Activate it!
    item.addClass("itemactive");
    $(".customcheck").css("background-color", "#befbbe")
    $("input[name='switch']").prop("checked", true);
  }
});

---

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