title: Toggle the icon on a jQuery UI button when clicked
body: <p>I'm writing a web app for a mobile phone and I want all of the checkboxes to be buttons with either a "check" or "cross" on them, along with the text of the checkbox.  I've got a working solution using jQuery UI, but it doesn't seem every elegant. Can anyone suggest any improvements?</p>
  
  <p>Here's the code:</p>
  
  <pre><code>$(function () {
      $("input[type=checkbox]")
      .button({ icons: { primary: "ui-icon-circle-close"} })
      .click(function () {
          if (this.checked) {
              $(this).button("option", "icons", { primary: 'ui-icon-circle-check' })
          }
          else {
              $(this).button("option", "icons", { primary: 'ui-icon-circle-close' })
          }
      });
      $("input[type=checkbox]:checked")
      .button({ icons: { primary: "ui-icon-circle-check"} })
      .click(function () {
          if (this.checked) {
              $(this).button("option", "icons", { primary: 'ui-icon-circle-check' })
          }
          else {
              $(this).button("option", "icons", { primary: 'ui-icon-circle-close' })
          }
      });
  });
  </code></pre>