在Jquery按钮上切换图标

时间:2010-11-17 15:49:02

标签: jquery jquery-ui jquery-plugins button toggle

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

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

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

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

我该怎么做?

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

1 个答案:

答案 0 :(得分:2)

这样的事情对你有用。这是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]);
});