javascript - 如果在使用 IE 7 或 8 时隐藏，则单击标签不选中复选框

Question

我正在尝试使用与复选框元素关联的标签创建自定义设计的复选框并隐藏(显示:无)复选框。

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

这是我的代码...

HTML

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

CSS

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

j查询

$("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

Answer 1

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

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


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

DEMO

---

更新

而且您还可以将复选框不透明度设置为零，这将隐藏它而不用“dispayl:none”，

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

或

$(this).fadeTo(0, 0)