При нажатии кнопки на значке пользовательского интерфейса jQuery

Question

Я пишу веб-приложение для мобильного телефона и хочу, чтобы все флажки были кнопками с надписью «check» или «cross», вместе с текстом флажка.У меня есть рабочее решение с использованием 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 */
}