單擊時切換jQuery UI按鈕上的圖標

Question

我正在爲手機編寫Web應用程序，並且我希望所有複選框都是按鈕，其中包含「檢查」或「交叉」對象以及複選框的文本。我有一個使用jQuery UI的工作解決方案，但它似乎並不優雅。任何人都可以提出任何改進？

下面的代碼：

$(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

這個選項應該是jQueryUI的一部分。

你可以用這個簡化：

$("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

爲此，您可以更輕鬆地使用CSS。只需在你的樣式表中加入以下內容（必須在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 */ 
}