8

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

这在除 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

4

2 回答 2

9

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

.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)
于 2012-07-18T14:06:27.920 回答
2

试试这个：

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

并保留复选框“可见”

于 2012-07-18T14:09:22.240 回答