Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
A jQuery plugin to replace checkboxes and radios for custom images
JavaScript CSS
Branch: gh-pages
Pull request Compare This branch is even with gh-pages.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
css
goodies
img
js
tests
.gitignore
README.md
index.html
robots.txt

README.md

What does it do?

This plugin replaces the default checkboxes and radio inputs for better looking ones.

Features:

  • Compatible with IE7+, Chrome, Firefox, Safari and mobile browsers;
  • Custom design, kindly provided by Bruno O. Barros;
  • Four color options (Twitter bootstrap) + editable PSD;
  • Better look & size;
  • Super easy implementation;
  • Selectable with Tab and checkable with keyboard;
  • Change events & Chainning preserved;
  • More area of click/touch. A plus for mobile devices.

Install & Setup

Download the files (or fork it) and include jQuery and prettyCheckable files:

<link rel="stylesheet" href="js/prettyCheckable/prettyCheckable.css">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/prettyCheckable/prettyCheckable.js"></script>

Write your inputs and add a class for the jQuery selector:

<input type="checkbox" class="myClass" value="yes" id="answer" name="answer"/>

Setup prettyCheckable for your inputs and you're all set:

$().ready(function(){

  $('input.myClass').prettyCheckable();

});

You can start the plugin with the options you see on the documentation bellow and they will be applied to all matching inputs:

$().ready(function(){

  $('input.myClass').prettyCheckable({
    color: 'red'
  });

});

If you want to apply something to all the inputs but you need a few specific ones to be different, you can add the specifics inline:

<input type="checkbox" class="myClass" value="yes" id="answer" name="answer" data-color="green" />

Documentation

None of the parameters is mandatory.

Options

Name Values Description
labelPosition string
left, right(default)

This is the position where the label for the inputs should be placed, if informed.

customClass string
A class name.

This will add a class you want to the wrapping div surrounding the input, created by the plugin.

color string
blue(default), green, yellow or red

Choose between one of the four colors options.

Inline Options

All inline configs will overwrite the ones you initialized the plugin with.

Name Values Description
data-label string
Text for your label

If informed, this will create a label attached to the input.

data-labelPosition string
left, right(default)

This is the position where the label for the inputs should be placed, if informed.

data-customClass string
A class name.

This will add a class you want to the wrapping div surrounding the input, created by the plugin.

data-color string
blue(default), green, yellow or red

Choose between one of the four colors options.

Methods

The plugin returns an array of Plugin instances. Once you found the object you're looking for, simply call one of theses puppies. Check main.js, which I used to build the examples you see in here for more details.

Name Description
.enableInput()

Um... well... it enables the input.

.disableInput()

If you can't figure this one out, I'm not sure you should be even reading this.

Customization

If you want to create your own designed checkboxes or you just need a different color set, download the prettyCheckable PSD, do whatever you need to, add the entries to your CSS and pass the name of your color/style in the color or customClass parameters, according to the CSS code you can see on prettyCheckable.css.

Something went wrong with that request. Please try again.