自定义样式的复选框无法正常工作答案

【问题标题】：Custom styled checkbox not working properly自定义样式的复选框无法正常工作
【发布时间】：2013-07-15 23:35:49
【问题描述】：

目前我正在使用以下代码的多个块作为我的自定义样式复选框：

  <div class="row-fluid">
    <div class="span12 card card-even">
      <div>
      <h3><label class="checkbox">
      <i class="icon-check-empty"></i>
      <input type="checkbox" value="1" />
    </label></h3>
      </div>
    </div>
  </div>

JS：

jQuery.fn.extend({
  shinyCheckbox: function() {
    var setIcon;
    setIcon = function($el) {
      var checkbox, iclass;
      checkbox = $el.find("input[type=checkbox]");
      iclass = "";
      if (checkbox.is(":checked")) {
        iclass = "icon-ok";
      } else {
        iclass = "icon-check-empty";
      }
      return $el.find("i[class^=icon-]").removeClass("icon-check").removeClass("icon-check-empty").addClass(iclass);
    };
    this.find("input[type=checkbox]").change(function() {
      return setIcon($(this).parents("label.checkbox"));
    });
    return this.each(function(i, el) {
      return setIcon($(el));
    });
  }
});

$(document).ready(function() {
  return $("label.checkbox").shinyCheckbox();
});

我可以通过设置 icon-check-empty 和 icon-check 类的样式来满足我的要求，但是当我点击任何复选框时，只有第一个复选框被激活。

如何使用 this 关键字来解决问题，以便激活正确的复选框？

【问题讨论】：

标签： javascript jquery forms coffeescript

【解决方案1】：

根据您的代码，这是我的做法：

jQuery.fn.extend({
    shinyCheckbox: function () {
        var setIcon = function ($el) {
            var checkbox = $el.find("input[type=checkbox]"), checked = checkbox.is(':checked');
            checkbox.val(+checked);
            return $el.find("i[class^=icon-]").removeClass("icon-check-empty icon-ok").addClass(function () {
                return checked ? "icon-ok" : "icon-check-empty";
            });
        };
        this.find("input[type=checkbox]").on('change', function () {
            return setIcon($(this).closest("label.checkbox"));
        });
        return this.each(function (i, el) {
            return setIcon($(el));
        });
    }
});

$(document).ready(function () {
    $("label.checkbox").shinyCheckbox();
});

主要问题是您没有删除 icon-ok 类，只是删除了 icon-check 类。我还清理了一些代码。

它正在运行：http://jsfiddle.net/W88fk/1/

【讨论】：

哦，非常感谢先生 :) .... 非常感谢您修复... 但是复选框的值仍然为“1”... 也可以切换吗？ ...再次感谢....
@SkyKOG - 不客气 :) 我刚刚更新了它以更改值。

【解决方案2】：

你可以试试

jQuery.fn.extend({
  shinyCheckbox: function() {
    return this.each(function() {
      var el=$(this),checkbox = el.find("input[type=checkbox]");
      checkbox.change(function() {
          var iclass = checkbox.is(":checked")?"icon-ok":"icon-check-empty";
          el.find("i[class^=icon-]").removeClass().addClass(iclass);
          var cval= checkbox.is(":checked")?0:1;
          checkbox.val(cval);
      });
});
}
});

$(document).ready(function() {
  $("label.checkbox").shinyCheckbox();
});

toogle 类和值http://jsfiddle.net/rWFMm/1/

【讨论】：