Skip to content

Instantly share code, notes, and snippets.

@toepoke
Created July 22, 2012 12:48
Show Gist options
  • Save toepoke/3159559 to your computer and use it in GitHub Desktop.
Save toepoke/3159559 to your computer and use it in GitHub Desktop.
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/
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);
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment