Alternar el icono en un botón de la interfaz de usuario jQuery al hacer clic en

Question

Estoy escribiendo una aplicación web para un teléfono móvil y quiero que todas las casillas de verificación sean botones con una "marca" o "cruz" en ellas, junto con texto de la casilla de verificación. Tengo una solución funcional que usa jQuery UI, pero no parece elegante. ¿Alguien puede sugerir alguna mejora?

Aquí está el código:

$(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' }) 
     } 
    }); 
}); 

Answer 1

Esta opción debe ser parte de jqueryui.

Se puede simplificar con esto:

$("input: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"}) 
     } 
    }) 
    .filter(":checked").button({icons: {primary: "ui-icon-circle-check"}}); 

Answer 2

Usted puede hacer esto más fácilmente el uso de CSS. Sólo tiene que colocar el siguiente en la hoja de estilo (debe ser cargado después de la jquery-ui.css):

input:checkbox + label .ui-icon { 
    background-position: -32px -192px; /* position for ui-icon-circle-close */ 
} 

input:checkbox:checked + label .ui-icon { 
    background-position: -208px -192px; /* position for ui-icon-circle-check */ 
}