5

私は携帯電話用の 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' })
        }
    });
});
4

2 に答える 2

9

このオプションは、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"}});
于 2010-12-16T00:36:44.720 に答える
1

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 */
}
于 2012-08-25T12:14:37.470 に答える