目前,我使用以下代码的多个 block 作为我的自定义样式复选框:
<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 关键字来解决问题,以便激活正确的复选框?
最佳答案
根据您的代码,这是我的做法:
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/
关于javascript - 自定义样式的复选框无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17657090/