Jquery 按钮上的切换图标

发布于 2024-10-02 23:28:15 字数 351 浏览 0 评论 0原文

我有一个像这样的 JQuery 按钮:

$("#Activechk").button();

<input type="checkbox" checked="checked" id="Activechk" /><label for="Activechk">Active</label>

当按钮“打开”或“选中”时,我想显示主要图标: ui-icon-check 当按钮“关闭”或“不检查”时,我想显示主要图标:ui-图标-取消。

我该怎么做?

注意:当页面加载时,按钮的初始值(选中或未选中)是从数据库中的值获取的,然后用户可以单击切换按钮并单击保存。

I have a JQuery button like this:

$("#Activechk").button();

<input type="checkbox" checked="checked" id="Activechk" /><label for="Activechk">Active</label>

When the button is "on" or "checked" I want to show icon primary: ui-icon-check and when the button is "off" or "not check" I want to show icon primary: ui-icon-cancel.

How would I do this?

Note: when the page loads the initial value (checked or not checked) of the button is gotten from a value in a database, then the user can click the toggle button and click save.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

黑色毁心梦 2024-10-09 23:28:15

像这样的东西应该对你有用。这是一个 演示 http://jsfiddle.net/387j4/7/

function myclickfunction (element) {
     if (element.checked) {
      $(element).button("option", "icons", { primary: 'ui-icon-check' });
    } else {
      $(element).button("option", "icons", { primary: 'ui-icon-cancel' });
    }
}
$(document).ready(function () {  
  var activechk = $("#Activechk");
  activechk.button();
  activechk.click(function() {
    myclickfunction (this);
  });

  myclickfunction(activechk[0]);
});

Something like this should work for you. Here is a demo http://jsfiddle.net/387j4/7/

function myclickfunction (element) {
     if (element.checked) {
      $(element).button("option", "icons", { primary: 'ui-icon-check' });
    } else {
      $(element).button("option", "icons", { primary: 'ui-icon-cancel' });
    }
}
$(document).ready(function () {  
  var activechk = $("#Activechk");
  activechk.button();
  activechk.click(function() {
    myclickfunction (this);
  });

  myclickfunction(activechk[0]);
});
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文