chelsea · February 4, 2011 08:30
diff --git a/html b/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>
diff --git a/js plugin b/js plugin
 //##############################
 // jQuery Custom Radio-buttons and Checkbox; basically it's styling/theming for Checkbox and Radiobutton elements in forms
 // By Dharmavirsinh Jhala - [email protected]
 // 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 - [email protected]
	// 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");
	}
	});