Pretty checkboxes (using ui-icon jQuery UI framework icons to overlay over the top of the underlying checkbox - _doesn't_ touch any associated label)

prettyCheckboxes

/// <summary>
/// Takes advantage of the jQuery UI framework icons (see http://jqueryui.com/themeroller/) to pretty
/// up checkboxes
/// </summary>
/// <param name="filter">jQuery selector targetting the checkboxes, e.g. "input[type=checkbox]" attaches to all checkboxes</param>
function prettyCheckboxes(filter) {
	// some constants for the icons, here are some variants you might want to consider:
	//   onClass                   offClass
	//   "ui-icon-check"           "ui-icon-close"
	//   "ui-icon-circle-check"    "ui-icon-circle-close"
	//                             "ui-icon-closethick"
	var onClass = "ui-icon-check", offClass = "ui-icon-closethick";

	// iterative over each in the filter (should just be checkboxes)
	$(filter).each(function (index) {
		// reference to the checkbox
		var chk = $(this);

		// is the checkbox currently ticked nad/or disabled? 
		var isChecked = chk.is(':checked');
		var isDisabled = chk.prop("disabled");
		// locals for referencing the correct initial class state
		var startIcon = (isChecked ? onClass : offClass);
		var startState = "";
		if (isDisabled) {
			// disabled appearance takes precendence over checked
			startState = "ui-state-disabled";
		} else {
			startState = (isChecked ? " ui-state-active " : "");
		}

		// hide the original checkbox (this will only exist behind the scenes)
		chk.addClass("ui-helper-hidden");

		// build up the mark up for the pseudo icon
		// ... basically we have a surrounding "inline-block" span around the icon span so we can have the background icon appear
		var icoHtml = "<span class='ui-icon " + startIcon + "' />";
		var wrapper =
			"<span " +
				"class='ui-state-default " + startState + " ui-corner-all ui-button' " +
				"style='display: inline-block; width: 16px; height: 16px; margin-right: 5px;'>" +
			icoHtml + "</span>";

		// insert the pseudo icon just before the checkbox itself 
		// ... (easy for debugging if it's next door)
		chk.before(wrapper);

		// get a reference back to the inline-block span which allows the background-image to be visible
		var container = chk.prev();
		// ... and a reference to the icon itself (i.e. the jQuery UI "ui-icon" span)
		var ico = container.find("span");

		// create an inline helper function for updating the appearance of the widget
		var updateUI = function () {
			var isChecked = chk.prop("checked");
			var isDisabled = chk.prop("disabled");

			ico
				.toggleClass(onClass, isChecked)
				.toggleClass(offClass, !isChecked)
			;
			container
				.toggleClass("ui-state-active", (!isDisabled && isChecked))
				.toggleClass("ui-state-disabled", isDisabled);
			;
		};

		// hover behaviour, note this is against the container element
		container.hover(
			function () { container.addClass("ui-state-hover") },
			function () { container.removeClass("ui-state-hover") }
		);

		// ... and wire up when the user clicks on the container
		container.click(function (event) {
			// change the appearance of the widget given the container has been clicked
			updateUI();
			// propagate the click through to the underlying checkbox 
			// ... the handles any other events that have latched onto the click event of the checkbox
			// ... and honours them
			chk.click();
		});
		chk.change(function () {
			// change the appearance of the widget given the underlying checkbox value has changed
			// ... again this is for anything else modifying the checkbox behind the scnenes ...
			updateUI();
		});

	});

} // prettyCheckboxes