A jQuery plugin to replace checkboxes and radios for custom images
JavaScript
Switch branches/tags
Nothing to show
Pull request Compare This branch is 27 commits behind arthurgouveia:master.
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
README.md
jquery-1.8.1.min.js
prettyCheckable-blue.png
prettyCheckable-green.png
prettyCheckable-red.png
prettyCheckable-yellow.png
prettyCheckable.css
prettyCheckable.js

README.md

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