Chuyển đổi biểu tượng trên nút Giao diện người dùng jQuery khi nhấp vào

Question

Tôi đang viết ứng dụng web cho điện thoại di động và tôi muốn tất cả các hộp kiểm là các nút có dấu "hoặc" hoặc "chéo" văn bản của hộp kiểm. Tôi đã có một giải pháp làm việc bằng cách sử dụng jQuery UI, nhưng nó không có vẻ thanh lịch. Bất cứ ai có thể đề xuất bất kỳ cải tiến?

Dưới đây là các mã:

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

Tùy chọn này nên được một phần của jQueryUI.

Bạn có thể đơn giản hóa với điều này:

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

Bạn có thể làm điều này một cách dễ dàng hơn khi sử dụng CSS. Chỉ cần đặt những điều sau trong tờ định kiểu của bạn (phải được tải sau 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 */ 
}