prettyCheckboxes, a solution to checkboxes

by: Stéphane Caron

This script is for people who wants to have a consistent look for checkboxes across browser or those who simply want them to look better. By using this script you wont loose any of the regular inputs usability. If you have any comment/suggestion please post them in the main script post.

Demo

Browser support

This plugin has been tested and is known to work in the following browsers

• Firefox 3.0 (Mac/PC/Linux)
• Firefox 2.0 (Mac/PC/Linux)
• Opera 9.5 (Mac/PC)
• Safari 3.1.1 (Mac)
• Internet Explorer 6.0 (PC)
• Internet Explorer 7.0 (PC)

Copyright

This script is licensed under Creative Commons Attribution 2.5. So you can use it in all you projects even commercial ones. Donations are always welcome.

Download

Uncompressed version (Script: 2.2kb)

Compressed version (Script: 1.8kb)

Version history

• 1.0.1: Fixed a bug with radio buttons name array.
• 1.0: Initial release of prettyCheckboxes.

How to use

Nothing is easier to use. First include the jQuery library then include the prettyCheckboxes javascript in the head of the page(s) where you want to use prettyCheckboxes.
jQuery can be download here

IMPORTANT: For the script to work properly EVERY labels need to have a "for" attribute linking to the ID of their corresponding checkbox/radio

					
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/prettyCheckboxes.js" type="text/javascript" charset="utf-8"></script>
					
				

Then you need to initalize prettyCheckboxes.

					
	$(document).ready(function(){
		$('input[type=checkbox],input[type=radio]').prettyCheckboxes();
	});
					
				

If you want prettyCheckboxes to be initialized on specific inputs, you can specify which element by using a CSS selector, like so:

					
	$(document).ready(function(){
		$('input.myCheckbox').prettyCheckboxes();
	});
					
				

You can provide several parameters to the function if you want to customize it a bit further

					
	$(document).ready(function(){
		$('input[type=checkbox],input[type=radio]').prettyCheckboxes({
			checkboxWidth: 17, // The width of your custom checkbox
			checkboxHeight: 17, // The height of your custom checkbox
			className : 'prettyCheckbox', // The classname of your custom checkbox
			display: 'list' // The style you want it to be display (inline or list)
		});
	});
					
				

To check all the checkboxes of a group, you can call the checkAllPrettyCheckboxes(caller,container) function. The caller must be the calling element (this) and the container must be the element that contains the checkboxes to check, it can be $(body) if you want to check all the checkboxes on a page.

				
<input type="checkbox" name="checkbox-5" id="checkbox-5" value="checkbox-5"
onclick="checkAllPrettyCheckboxes(this,$('#checkboxDemo'))" />
				
			

If you can to customize the look of the inputs, you can customize those image

Please note that you have the hover and selected state in the same image and that the inputs should be at the same position, unless you want/can modify the CSS yourself.

That's it, now your inputs should behave the same as in the demo on this page

Support

If you need support, you can leave a comment in the main prettyCheckboxes post.

Donations

I've spent a lot of time to develop/support this script. You liked it? Feel free to donate!

© Stéphane Caron 2008