prettyCheckboxes documentation

Below you can find the complete documentation for prettyCheckboxes.

If you are having problems with prettyCheckboxes and need support, please come and ask your questions in our forums.

If you got here by mistake, don’t leave! The main prettyCheckboxes page can be found here.

If you we’re not looking for prettyGallery well too bad, but you can still read my blog here.

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'))" />