Javascript 使用IE 7或8时，单击标签不选中隐藏复选框

我正在尝试使用与复选框元素关联的标签创建自定义设计的复选框，并隐藏（显示：无）复选框

这在除IE之外的所有浏览器中都能正常工作，IE要求复选框可见，标签才可单击

这是我的密码

HTML

jquery

$("input[type=checkbox]").each(function() {
    $(this).hide().before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>');
});

$("input[type=checkbox]").live('change', function() {
    if ($(this).prop('checked') == true) {
        $('label[for=' + $(this).attr("id") + ']').html("X")
    } else {
        $('label[for=' + $(this).attr("id") + ']').html("")
    }
});​

$（“输入[type=checkbox]”）。每个（函数（）{
$（this.hide（）。在（“”）之前；
});
$（“输入[类型=复选框]”）.live（'change'，function（）{
if（$（this）.prop（'checked'）==true）{
$（'label[for='+$（this.attr（“id”）+']'）.html（“X”）
}否则{
$（'label[for='+$（this.attr（“id”）+']'）.html（“”）
}
});​

---

或者

我不知道是否有更有效的方法来实现这一点，但您可以通过在页面外设置复选框元素位置来实现

.hiddenEl {
   position:absolute;
   top: -3000px;
}


$("input[type=checkbox]").each(function() {
    $(this).addClass("hiddenEl").before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>');
});

或

试试这个：

#myCheck{
  position:absolute;
  left:-9999px;
  }

---

并保留复选框“可见”

我认为Firefox中也会出现这种情况，但我不确定。OSX上最新版本的FF中不会出现这种情况，不过windows上也没有尝试过。注意：通常最好使用

left:-3000px

而不是

top:-3000px

（或999px）。当您使用

top

单击标签时，焦点将设置为radiobutton，IE8将尝试将其显示在视图中，这会产生滚动到页面顶部的不幸副作用。因此，如果您的内容水平放置且没有水平滚动条，则最好使用

left

而不是

top

Internet Explorer在IE9版本之前不支持

opacity

属性，因此我不得不使用

filter:Alpha（opacity=0）

@ityler22，我想你不必担心这个问题，因为它是由jquery处理的。@ocanal这很有趣，我必须尝试一下！诚然，我从纯CSS方法中使用了您的解决方案，这可以解释为什么它可以通过使用jquery添加不透明性来工作。

.hiddenEl {
   position:absolute;
   top: -3000px;
}


$("input[type=checkbox]").each(function() {
    $(this).addClass("hiddenEl").before('<label for="' + $(this).attr("id") + '" class="checkbox"></label>');
});

$(this).css("opacity", 0)

$(this).fadeTo(0, 0)

#myCheck{
  position:absolute;
  left:-9999px;
  }