Add ui-icon icons to checkboxes to illustrate if they're clicked or not .. inspired by http://iwritecrappycode.wordpress.com/2012/03/01/jquery-ui-checkbox-better-feedback/

gistfile1.txt

var onClass = "ui-icon-circle-check", offClass = "ui-icon-circle-close";
	
$( "input:checked[type=checkbox] " ).button({ icons: {primary: onClass} });
$( "input[type=checkbox]:not(:checked)" ).button({ icons: {primary: offClass} });
	
$( "input[type=checkbox]" ).click(function(){
	var swap = function(me, toAdd, toRemove) {
		// find the LABEL for the checkbox
		// ... which should be _immediately_ before or after the checkbox
		var node = me.next();
		if (node.prop("tag") != "LABEL")
			node = me.prev();

		// and swap
		node.children(".ui-button-icon-primary")
			.addClass(toAdd)
			.removeClass(toRemove);
		;
	};

	var me = $(this);
	if (me.is(':checked')) {
		swap($(this), onClass, offClass);
	} else {
		swap($(this), offClass, onClass);
	}
});