Jquery 按钮上的切换图标

Question

我有一个这样的 JQuery 按钮：

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

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

当按钮“打开”或“选中”时，我想显示主图标：ui-icon-check，当按钮“关闭”或“未选中”时，我想显示主图标：ui-icon-取消。

我该怎么做？

注意：页面加载时按钮的初始值（选中或未选中）是从数据库中的值获取的，然后用户可以点击切换按钮并点击保存。

Answer 1

这样的东西应该适合你。这是demohttp://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]);
});