我正在为手机编写一个网络应用程序,我希望所有复选框都是带有“检查”或“交叉”的按钮,以及复选框的文本。我有一个使用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' })
}
});
});
答案 0 :(得分: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"}});
答案 1 :(得分: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 */
}