Allow you to easily custom your checkboxes with Mootools.

CustomCheckbox.js

/**
 * @author VEBER Maxime (Nek) <[email protected]>
 * @company Wandi <www.wandi.fr>
 * @requirements Mootools
 * @compatibility IE7
 * 
 * 
 * You can't pimp your checkbox with simple html/css.
 * This script is make to allow you to customize easily your checkboxes
 * 
 * Take a look to the default options array to understand how it works.
 * 
 * 
 * Usage :
 * =======
 * 
 * <!-- HTML -->
 * <input type="checkbox" class="customcheckbox" name="foo" /> PimpedCheckbox!
 * 
 * // Javascrtipt
 * new CustomCheckbox();
 * 
 * Features :
 * =========
 * 
 *    - Support childs for checkbox in cascades
 *    - Full commented
 *    - Simple to use
 *    - Clean DOM
 *    - Simple conception (you can edit it !)
 *    
 * Notice :
 * ========
 * 
 * The script support the direct change on 
 */
var CustomCheckbox = new Class({
	
	/**
	 * Initialize & build the checkbox
	 * 
	 * @param options Object
	 * @return void
	 * @see build method
	 */
	initialize: function (options) {
		this.options = {
			// The class of object available to be transform
			'selector':  '.customcheckbox',
			// The template of the new fake checkbox
			'template':  '<span class="checkbox-view"></span>',
			// Where the template will be add in the dom, the reference is the concerned input
			// Available position are "after" and "before"
			'position': 'after',
			// Class after check
			'checked':  'checked',
			
			// Command available for notify that checkbox has children in DOM
			// -- in the dom you should specify the id of the div who contains children
			// example: <input class="child=[id_of_the_div_who_contains_children]" />
			'childrenCommand': 'child',
			// Class witch is set if the checkbox have children
			'hasChildren':     'has-children',
			// Prefix for make id to be able to recognize a parent
			'parentIdPrefix':  'parent-checkbox',
			'idCheckboxPrefix': 'checkbox-generated-id',
			'idFakeboxPrefix': 'fakebox-generated-id'
		};
		
		// Merging parameter options with default options
		this.options = Object.merge(this.options, options);
		
		this.build();
	},
	
	/**
	 * Build all checkboxes (display none the current checkbox and show the fake box)
	 * 
	 * @return void
	 */
	build: function () {
		// For each checkbox
		$$(this.options.selector).each((function(el, index) {
			var span = Elements.from(this.options.template)[0];
			
			if (el.get('checked'))
				span.addClass(this.options.checked);
			
			// Generating id
			// We must use id, some selector usefull doesn't work with mootools/IE7
			// say it clearly: it's a mootools bug
			if (el.get('id') === null) {
				el.set('id', this.options.idCheckboxPrefix + '-' + index);
			}
			span.set('id', this.options.idFakeboxPrefix + '-' + index);
			
			span.store('checkbox-id', el.get('id'));
			el.store('fakebox-id', span.get('id'))
			
			// DOM movements
			el.grab(span, this.options.position);
			el.setStyle('display', 'none');
			

			
			// Check if the current checkbox has children
			var classes = el.get('class');
			classes = classes.split(' ');
			
			
			// Check for children
			// Hmm sorry, it will be a little bit hard
			// form: <input class="child[id_div_children_container]" />
			var exp = /([A-Za-z]+)=\[([A-Za-z]+)\]/;
			var match = null;
			var parent = null;
			for (var i = 0; i < classes.length; i++) {
				if (classes[i].test(exp)) {
					match = classes[i].match(exp);
					if (match[1] === 'child') {
						el.addClass(this.options.hasChildren);
						el.store('child-div-id', match[2]);
						el.set('id', el.get('id') !== null ? el.get('id') : this.options.parentIdPrefix + index);
						parent = el.get('id');
					}
				}
			}
			
			if (parent !== null) {
				$$('#' + match[2] + ' ' + this.options.selector).each(function(el) {
					el.store('parent-id', parent);
				});
			}
			
			
			// Events addition
			span.addEvent('click', this.click.bind(this));
			el.addEvent('change', this.synch.bind(this, el));
		}).bind(this));
	},
	
	/**
	 * Action on click on the fake checkbox
	 * 
	 * @param Event e
	 * @return void
	 */
	click: function (e) {
		var fakebox = e.target;
		var checkbox = this.guessCheckbox(fakebox);
		
		// Check the position to get the good checkbox
		
		// Uncheck/Check checkbox & fake-checkbox
		if (fakebox.hasClass(this.options.checked)) {
			checkbox.set('checked', false);
			fakebox.removeClass(this.options.checked);
			// If it's an uncheck and the current checkbox have childs
			var child = null;
			if (child = checkbox.retrieve('child-div-id')) {
				child = $(child);
				child.getElements(this.options.selector).each(function(el) {
					if(el.get('checked'))
						el.fireEvent('change');
				});
			}

		} else {
			checkbox.set('checked', true);
			fakebox.addClass(this.options.checked);
			
			console.log(checkbox.get('id'));
			// if has parent, the parent must be checked
			var parent = null;
			if (parent = checkbox.retrieve('parent-id')) {
				parent = $(parent);

				parent.set('checked', true);
				this.guessFakebox(parent).addClass(this.options.checked);
			}
		}
		
		
		
		if(e.stop)
			e.stop();
	},
	
	/**
	 * Called on change of the input
	 * 
	 * @param Event
	 * @return void
	 */
	synch: function (checkbox) {
		var fakebox = this.guessFakebox(checkbox);
		fakebox.fireEvent('click', {target: fakebox});
	},
	
	/**
	 * Getting real checkbox from fakebox
	 * 
	 * @param Element fakebox
	 * @return Element input checkbox
	 */
	guessCheckbox: function (fakebox) {
		var checkbox = null;
		
		checkbox = $(fakebox.retrieve('checkbox-id'));
		
		return checkbox;
	},
	
	/**
	 * Getting fake checkbox from checkbox
	 * 
	 * @param Element checkbox
	 * @return Element span fake checkbox 
	 */
	guessFakebox: function (checkbox) {
		var fakebox = null;
		
		fakebox = $(checkbox.retrieve('fakebox-id'));

		return fakebox;
	}
});