HTML JavaScript:
----------------
<script type="text/javascript" src="libs/jquery-checkbox.1.3.0b1/jquery.checkbox.js"></script>
<script type="text/javascript">
			$(document).ready(function() {
				$('input:checkbox:not([safari])').checkbox();
				$('input[safari]:checkbox').checkbox({cls:'jquery-safari-checkbox'});
				$('input:radio').checkbox();

				// $('input:radio').change(function(){alert('callback testi 1')}); // Toimii radiobuttonia painaessa
				// $('input:radio').change(displayForm('form1')); // Ei toimi, rikkoo koko rakenteen ja tyylit

			});


			displayForm = function (elementId)
			{
				var content = [];
				$('#' + elementId + ' input').each(function(){
					var el = $(this);
					if ( (el.attr('type').toLowerCase() == 'radio'))
					{
						if ( this.checked )
							content.push([
								'"', el.attr('name'), '": ',
								'value="', ( this.value ), '"',
								( this.disabled ? ', disabled' : '' )
							].join(''));
					}
					else
						content.push([
							'"', el.attr('name'), '": ',
							( this.checked ? 'checked' : 'not checked' ),
							( this.disabled ? ', disabled' : '' )
						].join(''));
				});
				alert(content.join('\n'));
			}

			changeStyle = function(skin)
			{
				jQuery('#myform :checkbox').checkbox((skin ? {cls: skin} : {}));
			}

		</script>



HTML Form:
----------
<div id="form1" style="position:relative" action="urlitus.html" method="POST">
		<h3>Default skin</h3>
		<p><label><label> <input name="checkbox.1.1" type="checkbox" onclick="var j = jQuery('#check').attr('disabled', jQuery('#check').attr('disabled') ? false : true)"> Unchecked checkbox (by clicking on this checkbox you can disable/enable the checkbox below)</label></label></p>
		<p><input name="checkbox.1.2" type="checkbox" id="check" checked> <label for="check"><label> Checked  checkbox (this one)</label></label></p>

		<p><input name="checkbox.1.3" type="checkbox" disabled> Disabled & unchecked checkbox</p>
		<p><input name="checkbox.1.4" type="checkbox" disabled checked> Disabled & checked checkbox</p>

		<h3>Safari skin</h3>
		<p><input name="checkbox.2.1" type="checkbox" safari=1 onclick="jQuery('#check2').attr('checked', !jQuery('#check2').attr('checked') ? true : false)"> Unchecked checkbox (by clicking on this checkbox you can check/uncheck the checkbox below)</p>
		<p><input name="checkbox.2.2" type="checkbox" safari=1 id="check2" checked> Checked  checkbox (this one)</p>

		<p><input name="checkbox.2.3" type="checkbox" safari=1 disabled> Disabled & unchecked checkbox</p>
		<p><input name="checkbox.2.4" type="checkbox" safari=1 disabled checked> Disabled & checked checkbox</p>

		<h3>Radio button 1 (wrapped in <label>)</h3>
		<p><label><input name="radio.1" value="1" type="radio" > 1st radio button</label></p>
		<p><label><input name="radio.1" value="2" type="radio" > 2nd radio button</label></p>


		<h3>Radio button 2 (wrapped in <label>)</h3>
		<p><label><input name="radio.2" value="1" type="radio" > 1st radio button</label></p>
		<p><label><input name="radio.2" value="2" type="radio" > 2nd radio button</label></p>
</div>



jquery.checkbox.js:
-------------------

(function($){
	/* Little trick to remove event bubbling that causes events recursion */
	var CB = function(e)
	{
		if(!e) var e = window.event;
		e.cancelBubble = true;
		if(e.stopPropagation) e.stopPropagation();
		$ch.change(); // Callback for change event
	};

	$.fn.checkbox = function(options) {
	//function(){alert("debug2")};
		/* IE6 background flicker fix */
		try	{ document.execCommand('BackgroundImageCache', false, true);	} catch (e) {}

		/* Default settings */
		var settings = {
			cls: 'jquery-checkbox',  /* checkbox  */
			empty: 'empty.png'  /* checkbox  */
		};

		/* Processing settings */
		settings = $.extend(settings, options || {});

		/* Adds check/uncheck & disable/enable events */
		var addEvents = function(object)
		{
			var checked = object.checked;
			var disabled = object.disabled;
			var $object = $(object);

			if ( object.stateInterval )
				clearInterval(object.stateInterval);

			object.stateInterval = setInterval(
				function()
				{
					if ( object.disabled != disabled )
						$object.trigger( (disabled = !!object.disabled) ? 'disable' : 'enable');
					if ( object.checked != checked )
						$object.trigger( (checked = !!object.checked) ? 'check' : 'uncheck');
				},
				10 /* in miliseconds. Low numbers this can decrease performance on slow computers, high will increase responce time */
			);
			return $object;
		};
		//try { console.log(this); } catch(e) {}

		/* Wrapping all passed elements */
		return this.each(function()
		{
			var ch = this; /* Reference to DOM Element*/
			var $ch = addEvents(ch); /* Adds custom events and returns, jQuery enclosed object */

			/* Removing wrapper if already applied  */
			if (ch.wrapper) ch.wrapper.remove();

			/* Creating wrapper for checkbox and assigning "hover" event */
			ch.wrapper = $('<span class="' + settings.cls + '"><span class="mark"><img src="' + settings.empty + '" /></span></span>');
			ch.wrapperInner = ch.wrapper.children('span:eq(0)');
			ch.wrapper.hover(
				function(e) { ch.wrapperInner.addClass(settings.cls + '-hover');CB(e); },
				function(e) { ch.wrapperInner.removeClass(settings.cls + '-hover');CB(e); }
			);

			/* Wrapping checkbox */
			$ch.css({position: 'absolute', zIndex: -1, visibility: 'hidden'}).after(ch.wrapper);

			/* Ttying to find "our" label */
			var label = false;
			if ($ch.attr('id'))
			{
				label = $('label[for='+$ch.attr('id')+']');
				if (!label.length) label = false;
			}
			if (!label)
			{
				/* Trying to utilize "closest()" from jQuery 1.3+ */
				label = $ch.closest ? $ch.closest('label') : $ch.parents('label:eq(0)');
				if (!label.length) label = false;
			}
			/* Labe found, applying event hanlers */
			if (label)
			{
				label.hover(
					function(e) { ch.wrapper.trigger('mouseover', [e]); },
					function(e) { ch.wrapper.trigger('mouseout', [e]); }
				);
				label.click(function(e) { $ch.trigger('click',[e]); CB(e); return false;});
			}
			ch.wrapper.click(function(e) { $ch.trigger('click',[e]); CB(e); return false;});
			$ch.click(function(e) { CB(e); });
			$ch.bind('disable', function() { ch.wrapperInner.addClass(settings.cls+'-disabled');}).bind('enable', function() { ch.wrapperInner.removeClass(settings.cls+'-disabled');});
			$ch.bind('check', function() { ch.wrapper.addClass(settings.cls+'-checked' );}).bind('uncheck', function() { ch.wrapper.removeClass(settings.cls+'-checked' );});

			/* Disable image drag-n-drop for IE */
			$('img', ch.wrapper).bind('dragstart', function () {return false;}).bind('mousedown', function () {return false;});

			/* Firefox antiselection hack */
			if ( window.getSelection )
				ch.wrapper.css('MozUserSelect', 'none');

			/* Applying checkbox state */
			if ( ch.checked )
				ch.wrapper.addClass(settings.cls + '-checked');
			if ( ch.disabled )
				ch.wrapperInner.addClass(settings.cls + '-disabled');

		});
	}
})(jQuery);