Toggle icon on Jquery button

I开发者_如何学Go have a JQuery button like this:

$("#Activechk").button();

<input type="checkbox" checked="checked" id="Activechk" /><label for="Activechk">Active</label>

When the button is "on" or "checked" I want to show icon primary: ui-icon-check and when the button is "off" or "not check" I want to show icon primary: ui-icon-cancel.

How would I do this?

Note: when the page loads the initial value (checked or not checked) of the button is gotten from a value in a database, then the user can click the toggle button and click save.

Something like this should work for you. Here is a demo http://jsfiddle.net/387j4/7/

function myclickfunction (element) {
     if (element.checked) {
      $(element).button("option", "icons", { primary: 'ui-icon-check' });
    } else {
      $(element).button("option", "icons", { primary: 'ui-icon-cancel' });
    }
}
$(document).ready(function () {  
  var activechk = $("#Activechk");
  activechk.button();
  activechk.click(function() {
    myclickfunction (this);
  });

  myclickfunction(activechk[0]);
});