tarciozemel / prettyCheckable

A jQuery plugin to replace checkboxes and radios for custom images

#What does it do?

This plugin replaces the default checkboxes and radio inputs for better looking ones. Check the landing page for a demo.

##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.8.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.

##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.