当使用IE 7或8时，点击标签无法勾选复选框如果复选框被隐藏了。

Question

我正在尝试使用与复选框元素相关联的标签创建自定义设计的复选框，并隐藏（display:none）复选框。

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

这是我的代码...

HTML

<input type="checkbox" id="myCheck" />​

CSS

label.checkbox {
    border:1px solid #666;
    width:25px;
    height:23px;
    display:block; 
}​

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("")
    }
});​

或者jsfiddle

- Tom

---

我认为这在Firefox中也会发生，但我不确定。 - Inkbug

在 OSX 上的最新版本的 FF 中不支持，未在 Windows 上尝试。 - Tom

Answer 1

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

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


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

演示

---

更新

你还可以将复选框的透明度设置为零，这样就可以隐藏它而不使用"display:none"。

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

或者

$(this).fadeTo(0, 0)

- Okan Kocyigit

---

注意：通常最好使用left: -3000px而不是top:-3000px（或9999px）。当您使用top单击标签时，焦点将设置为单选按钮，IE8将尝试将其带入视图 - 这将不幸地导致滚动到页面顶部。因此，如果您的内容在水平方向上没有水平滚动条，则最好使用“left”而不是“top”。 - Simon_Weaver

opacity 属性在 Internet Explorer 版本 IE9 之前不受支持，因此我不得不使用 filter:Alpha(opacity=0)。mozilla-css-opacity - ityler22

@ityler22，我认为你不必担心这个问题，因为它已经被jQuery处理了。 - Okan Kocyigit

@ocanal 非常有趣，我得试一试！诚然，我是从纯 CSS 的角度使用了你的解决方案，这就解释了为什么可以通过 jQuery 添加不透明度。 - ityler22

Answer 2

试试这个：

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

并勾选“可见”复选框

- Carsen