jQuery iOS 5 Checkboxes

Purchase This Script

Description

I created this plugin to easily enable the iOS 5+ style checkboxes in HTML development. It is completely customisable with CSS for advanced users or the JS call can be modified to allow for simple tweaks like the colour, or the border-radus to turn the checkboxes into iOS4 style. I was keen to make the checkboxes without the need for images so it can be modified quickly, because of this i had to use CSS3 which means that older browsers will be effected but it does degrade gracefully. To make the code base shorter, for perfect results use jQuery 1.8+ as this includes browser prefixing support.

Features

  • iOS4, iOS5, iOS6, iOS7 UISwitch
  • 100% CSS3 for complete┬ácustomisability
  • Ability to change the Checked Colour
  • Any text for on/off
  • Auto sizing based on the font-size
  • Mobile Support (Although I know you may not want to load jQuery on a Mobile device.)
  • Global defaults, set style once and use across your website.

Demos

Basic Usage

Simply add the following line to convert all checkboxes into the iOS style

$(":checkbox").MobileCheckbox();

Disabled Style

Advanced Usage

Thats right, you can style have iOS 4- style

$(":checkbox").MobileCheckbox({
    borderRadius: 5
});

Any checked colour you like, also any text...

$(":checkbox").MobileCheckbox({
    checkedText: "YES",
    uncheckedText: "NO",
    color: "#F18C3D"
});

You can change the size with simple css

.smaller .MobileCheckboxContainer label{
    font-size: 10px;
}
.smaller .MobileCheckboxContainer .CheckboxHandle{
    border-width: 1px;
}
.bigger .MobileCheckboxContainer label{
    font-size: 50px;
}
.bigger .MobileCheckboxContainer .CheckboxHandle{
    border-width: 6px;
}


If the checkbox padding is off, you can adjust the margins

$("input[type=checkbox].small").mobileCheckbox({
    textMargin: 5,
    checkMargin: 2
});

Purchase This Script