Question

＆＃13;

.fancy-checkbox input[type="checkbox"],
.fancy-checkbox .checked {
    display: none;
}
 
.fancy-checkbox input[type="checkbox"]:checked ~ .checked
{
    display: inline-block;
}
 
.fancy-checkbox input[type="checkbox"]:checked ~ .unchecked
{
    display: none;
}

＆＃13;

<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<label class="fancy-checkbox">
  <input type="checkbox" />
  <i class="fa fa-fw fa-microphone unchecked"></i>
  <i class="fa fa-fw fa-microphone-slash checked"></i>
  Mute
</label>

＆＃13;

您好。我已经测试过无数个带有字体真棒的复选框的例子，但所有它们都使用：check，这使得它们在ie8中无法使用。问题是我的整个网站都是ie8兼容（我努力保持这种方式）所以，有没有人有一个ie8兼容的解决方案？

欢迎任何jquery解决方案，只需几行代码即可。我添加了一个例子（我喜欢）。感谢

这是最新消息

我设法找到了一个在ie8中运行的小插件，但它有一个问题。它适用于图像而不是字体真棒。我试图用字体真棒替换第一个复选框图像，但没有显示。我不知道为什么，因为在其他方面我通过font-family直接添加了字体真棒：FontAwesome;内容：＆＃39; \ f107＆＃39;;

那么，我想念什么？这是jsfiddle http://jsfiddle.net/Adyyda/yt12mzeh/ 第一个区域（复选框）应该显示字体很棒，而且它没有。

修复

原来我忘了添加：在我想要显示字体真棒的课程之前。

Answer 1

您可以使用事件冒泡来捕获所有相关事件。

$(document.body).on("change","input[type=checkbox]",function() {
    // jQuery used for convenience with IE8 compatibility ;)
    var t = $(this);
    if( t.prop("checked")) t.addClass("checked");
    else t.removeClass("checked");
});

现在使用.checked代替:checked：）

复选框，字体很棒ie8

1 个答案: