rjz · May 6, 2011 20:48
diff --git a/checkboxdemo.html b/checkboxdemo.html
 <!DOCTYPE html>
 <html>
 <head>
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
 <script type="text/javascript">
 /**
 *	Demo for replacing checkboxes with a custom element using jQuery
 *
 *	@author	RJ Zaworski <[email protected]>
 */

 ;(function($){
 /**
 *	Replace checkbox with a styleable div.
 *
 *	@param	class	the class name to apply to the new div
 */
 $.fn.autoCheckbox = function(settings){

 	// set up default settings
 	var o = $.extend({
 			class: 'my_custom_box'
 		}, settings || {});

 	$(this).each(function(){

 		// get the original checkbox
 		$this = $(this);

 		// create the replacement div
 		$('<div class="unchecked"></div>')
 			.addClass(o.class)
 			.click(function(){ 

 				// pass click event back to the original checkbox
 				$this.click()
 				
 				// update the div's class to reflect the current state
 				$(this).removeClass('checked').removeClass('unchecked').addClass( $this.is(':checked') ? 'checked' : 'unchecked' );
 			})
 			.insertAfter($this);

 		// hide the original div		
 		$this.hide();

 	});
 }

 // kickstart when the app begins
 $(document).ready(function(){
 	$('input[type=checkbox]').autoCheckbox({class:'fauxbox'});
 })	// document.ready
 })(jQuery);
 </script>

 <style type="text/css">
 /**
 *	Some default styling for our new checkbox elements. We'll need to style
 *	two states -- when the box is checked (.checked) and when it isn't 
 *	(.unchecked). For both states, we'll need both a default appearance and
 *	an appearance that's used when the checkbox is being hovered over/focused 
 *	on. Here goes nothing:
 */
 .fauxbox {
 	width:30px;
 	height:30px;
 	display:inline-block;
 	border:1px solid #ccc;
 	cursor:pointer;
 }
 .fauxbox.checked {
 	background-color:#0f0;
 }
 .fauxbox.checked:hover,
 .fauxbox.checked:focus {
 	background-color:#5f5;
 }
 .fauxbox.unchecked {
 	background-color:#fff;
 }
 .fauxbox.unchecked:hover,
 .fauxbox.unchecked:focus {
 	background-color:#cfc;
 }
 </style>

 </head>
 <body>
 <form>
 <input type="checkbox" name="checkbox" value="" />
 </form>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
	<script type="text/javascript">
	/**
	* Demo for replacing checkboxes with a custom element using jQuery
	*
	* @author RJ Zaworski <[email protected]>
	*/

	;(function($){
	/**
	* Replace checkbox with a styleable div.
	*
	* @param class the class name to apply to the new div
	*/
	$.fn.autoCheckbox = function(settings){

	// set up default settings
	var o = $.extend({
	class: 'my_custom_box'
	}, settings \|\| {});

	$(this).each(function(){

	// get the original checkbox
	$this = $(this);

	// create the replacement div
	$('<div class="unchecked"></div>')
	.addClass(o.class)
	.click(function(){

	// pass click event back to the original checkbox
	$this.click()

	// update the div's class to reflect the current state
	$(this).removeClass('checked').removeClass('unchecked').addClass( $this.is(':checked') ? 'checked' : 'unchecked' );
	})
	.insertAfter($this);

	// hide the original div
	$this.hide();

	});
	}

	// kickstart when the app begins
	$(document).ready(function(){
	$('input[type=checkbox]').autoCheckbox({class:'fauxbox'});
	}) // document.ready
	})(jQuery);
	</script>

	<style type="text/css">
	/**
	* Some default styling for our new checkbox elements. We'll need to style
	* two states -- when the box is checked (.checked) and when it isn't
	* (.unchecked). For both states, we'll need both a default appearance and
	* an appearance that's used when the checkbox is being hovered over/focused
	* on. Here goes nothing:
	*/
	.fauxbox {
	width:30px;
	height:30px;
	display:inline-block;
	border:1px solid #ccc;
	cursor:pointer;
	}
	.fauxbox.checked {
	background-color:#0f0;
	}
	.fauxbox.checked:hover,
	.fauxbox.checked:focus {
	background-color:#5f5;
	}
	.fauxbox.unchecked {
	background-color:#fff;
	}
	.fauxbox.unchecked:hover,
	.fauxbox.unchecked:focus {
	background-color:#cfc;
	}
	</style>

	</head>
	<body>
	<form>
	<input type="checkbox" name="checkbox" value="" />
	</form>
	</body>
	</html>