jquery-ui – 单击时在jQuery UI按钮上切换图标

我正在为移动电话编写一个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",{ primary: 'ui-icon-circle-close' })
        }
    });
    $("input[type=checkBox]:checked")
    .button({ icons: { primary: "ui-icon-circle-check"} })
    .click(function () {
        if (this.checked) {
            $(this).button("option",{ primary: 'ui-icon-circle-close' })
        }
    });
});

解决方法

这个选项应该是jqueryui的一部分.

你可以简化：

$("input:checkBox")
    .button({
        icons: {primary: "ui-icon-circle-close"}
    })
    .click(function () {
        if (this.checked) {
            $(this).button("option",{primary: "ui-icon-circle-check"})
        }
        else {
            $(this).button("option",{primary: "ui-icon-circle-close"})
        }
    })
    .filter(":checked").button({icons: {primary: "ui-icon-circle-check"}});