chelsea/html

## html

<html>
  <head>

    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
    <script type='text/javascript' src='jquery.custom_radio_checkbox.js'></script>
    <script type='text/javascript'>
	if (typeof(loadFirebugConsole) != 'undefined') { loadFirebugConsole(); }
	if (typeof(console) == 'undefined') { console = {debug: function(msg) { alert(msg); }}; }


	$(document).ready(function() {
	  $('#radioCheck1').dgStyle();

	  $('#radioCheck2').dgStyle();

	  $('#radioCheck3').dgStyle();

  });

	</script>

	<style type="text/css">
	span {
  	height: 16px;
  	width: 16px;
  	margin: 0 0 3px;
  	background-repeat:no-repeat;
  	cursor: default;
  	display: block;
  	float: left;
  }

  #radioCheck1 {
    background:url('adventure-ico.png');
  }

  #radioCheck2 {
    background:url('animals-ico.png');
  }

  #radioCheck3 {
    background:url('astronomy-ico.png');
  }
  .checked {
    background:url("checked-ico.png") !important;
  }

  span input, span label {
  	display: none;
  }

	</style>
  </head>

  <body>

	  <span id='radioCheck1'>
	 <input type='radio' id='one' name='category' class="one"/>
	<label for='one'>One</label>
	</span>

	  <span id='radioCheck2'>
    <input type='radio' id='two' name='category' class="two"/>
	    <label for='two'>Two</label>
	</span>

	  <span id='radioCheck3'>
    <input type='radio' id='three' name='category' class="three"/>
	    <label for='three'>Three</label>
	</span>
  </body>
</html>

## js plugin
//##############################
// jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
// By Dharmavirsinh Jhala - dharmavir@gmail.com
// Date of Release: 13th March 10
// Version: 0.8
/*
 USAGE:
	$(document).ready(function(){
		$(":radio").behaveLikeCheckbox();
	}
*/

var elmHeight = "25";	// should be specified based on image size

// Extend JQuery Functionality For Custom Radio Button Functionality
jQuery.fn.extend({
dgStyle: function()
{
	// Initialize with initial load time control state
	$.each($(this), function(){
		var elm	=	$(this).children().get(0);
		elmType = $(elm).attr("type");
		$(this).data('type',elmType);
		$(this).data('checked',$(elm).attr("checked"));
		$(this).dgClear();
	});
	$(this).mouseup(function() { $(this).dgHandle(); });
},
dgClear: function()
{
	if($(this).data("checked") == true)
	{
		$(this).addClass("checked");
		}
	else
	{
		$(this).removeClass("checked");
		}
},
dgHandle: function()
{
	var elm	=	$(this).children().get(0);
	if($(this).data("checked") == true)
		$(elm).dgUncheck(this);
	else
		$(elm).dgCheck(this);

	if($(this).data('type') == 'radio')
	{
		$.each($("input[name='"+$(elm).attr("name")+"']"),function()
		{
			if(elm!=this)
				$(this).dgUncheck(-1);
		});
	}
},
dgCheck: function(div)
{
	$(this).attr("checked",true);
	$(div).data('checked',true).addClass('checked');
},
dgUncheck: function(div)
{
	$(this).attr("checked",false);
	if(div != -1)
		$(div).data('checked',false).css({backgroundPosition:"center 0"});
	else
		$(this).parent().data("checked",false).removeClass("checked");
}
});

	<html>
	<head>

	<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js'></script>
	<script type='text/javascript' src='jquery.custom_radio_checkbox.js'></script>
	<script type='text/javascript'>
	if (typeof(loadFirebugConsole) != 'undefined') { loadFirebugConsole(); }
	if (typeof(console) == 'undefined') { console = {debug: function(msg) { alert(msg); }}; }


	$(document).ready(function() {
	$('#radioCheck1').dgStyle();

	$('#radioCheck2').dgStyle();

	$('#radioCheck3').dgStyle();

	});

	</script>

	<style type="text/css">
	span {
	height: 16px;
	width: 16px;
	margin: 0 0 3px;
	background-repeat:no-repeat;
	cursor: default;
	display: block;
	float: left;
	}

	#radioCheck1 {
	background:url('adventure-ico.png');
	}

	#radioCheck2 {
	background:url('animals-ico.png');
	}

	#radioCheck3 {
	background:url('astronomy-ico.png');
	}
	.checked {
	background:url("checked-ico.png") !important;
	}

	span input, span label {
	display: none;
	}

	</style>
	</head>

	<body>

	<span id='radioCheck1'>
	<input type='radio' id='one' name='category' class="one"/>
	<label for='one'>One</label>
	</span>

	<span id='radioCheck2'>
	<input type='radio' id='two' name='category' class="two"/>
	<label for='two'>Two</label>
	</span>

	<span id='radioCheck3'>
	<input type='radio' id='three' name='category' class="three"/>
	<label for='three'>Three</label>
	</span>
	</body>
	</html>
	//##############################
	// jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
	// By Dharmavirsinh Jhala - dharmavir@gmail.com
	// Date of Release: 13th March 10
	// Version: 0.8
	/*
	USAGE:
	$(document).ready(function(){
	$(":radio").behaveLikeCheckbox();
	}
	*/

	var elmHeight = "25"; // should be specified based on image size

	// Extend JQuery Functionality For Custom Radio Button Functionality
	jQuery.fn.extend({
	dgStyle: function()
	{
	// Initialize with initial load time control state
	$.each($(this), function(){
	var elm = $(this).children().get(0);
	elmType = $(elm).attr("type");
	$(this).data('type',elmType);
	$(this).data('checked',$(elm).attr("checked"));
	$(this).dgClear();
	});
	$(this).mouseup(function() { $(this).dgHandle(); });
	},
	dgClear: function()
	{
	if($(this).data("checked") == true)
	{
	$(this).addClass("checked");
	}
	else
	{
	$(this).removeClass("checked");
	}
	},
	dgHandle: function()
	{
	var elm = $(this).children().get(0);
	if($(this).data("checked") == true)
	$(elm).dgUncheck(this);
	else
	$(elm).dgCheck(this);

	if($(this).data('type') == 'radio')
	{
	$.each($("input[name='"+$(elm).attr("name")+"']"),function()
	{
	if(elm!=this)
	$(this).dgUncheck(-1);
	});
	}
	},
	dgCheck: function(div)
	{
	$(this).attr("checked",true);
	$(div).data('checked',true).addClass('checked');
	},
	dgUncheck: function(div)
	{
	$(this).attr("checked",false);
	if(div != -1)
	$(div).data('checked',false).css({backgroundPosition:"center 0"});
	else
	$(this).parent().data("checked",false).removeClass("checked");
	}
	});