5

我正在为手机编写一个网络应用程序,我希望所有复选框都是带有“复选”或“交叉”的按钮,以及复选框的文本。我有一个使用 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 回答