我在我的网站上使用Font Awesome作为图标。我是HTML和CSS的新手。我试着在复选框中使用它,并且很难弄清楚如何使用它来启用/禁用复选框,并显示相应的图标。
例如,我在复选框中使用以下标记:
<div style="font-size: 24px;">
<i id="prime" type="checkbox" class="icon-check-empty"></i>icon-check
</div>
启用/禁用复选框时,我使用以下jQuery更改图标:
$(".icon-check-empty").click(function(){
$('#prime').removeClass('icon-check-empty');
$('#prime').addClass('icon-check');
});
我肯定这不是它应该如何使用的方式。你能告诉我应该怎么使用它吗?
现在,我想使用复选框,我的目标是选中/取消选中该复选框,并显示其相应的图标。选中时:图标-检查;未选中:图标-检查-空
请给我指引!
发布于 2012-06-27 18:16:12
$("yourselector").click(function(){
if($(this).hasClass('icon-check')){
$(this).removeClass('icon-check').addClass('icon-check-empty');}
else {
$(this).removeClass('icon-check-empty').addClass('icon-check');}
});
根据需要更改yourselector
部件
发布于 2012-11-15 06:26:49
如果你运行的是jQuery,你可以使用类似下面这样的代码。
扩展jQuery:
jQuery.fn.extend({
shinyCheckbox:
function() {
var setIcon = function($el) {
var checkbox = $el.find('input[type=checkbox]');
var iclass = '';
if (checkbox.is(':checked')) {
var iclass = 'icon-check';
} else {
var iclass = 'icon-check-empty';
}
$el.find('i[class^=icon-]').removeClass('icon-check').removeClass('icon-check-empty').addClass(iclass);
}
this.find('input[type=checkbox]').change(function() {
setIcon($(this).parents('label.checkbox'));
});
this.each(function(i, el) {
setIcon($(el));
});
}
});
$(document).ready(function() {
$('label.checkbox').shinyCheckbox();
});
然后在html中使用以下代码:
<label class="checkbox" for="mycheckbox">
<i class="icon-check-empty"></i>
<input type="hidden" name="mycheckbox" value="0" />
<input id="mycheckbox" name="mycheckbox" type="checkbox" value="1" checked="checked" />
Meine Checkbox hat einen sehr langen Text
</label>
和一些基本的css,你就会有一个闪亮的复选框:
input[type="checkbox"] {
display: none;
}
label.checkbox {
cursor: pointer;
display: inline-block;
margin-left: 1px;
padding-left: 15px; /* maybe this is not enough for your font size - remember: it's just an example and not best practice */
}
label.checkbox .icon-check:before, label.checkbox .icon-check-empty:before {
margin-left: -15px;
padding-right: 3px;
}
发布于 2014-11-16 22:23:25
看看这个:http://codepen.io/jamesbarnett/pen/yILjk
下面是我使用的代码,来自上面的链接。
/*** custom checkboxes ***/
input[type=checkbox] {
display:none;
}
/* to hide the checkbox itself */
input[type=checkbox] + label:before {
font-family: FontAwesome;
display: inline-block;
}
input[type=checkbox] + label:before {
content: "\f096";
}
/* unchecked icon */
input[type=checkbox] + label:before {
letter-spacing: 10px;
}
/* space between checkbox and label */
input[type=checkbox]:checked + label:before {
content: "\f046";
}
/* checked icon */
input[type=checkbox]:checked + label:before {
letter-spacing: 5px;
}
https://stackoverflow.com/questions/11223615
复制相似问题