Question

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

除了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

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

<强>更新

你也可以将checbox不透明度设置为零，这将隐藏它而不使用“dispayl：none”，

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

或

$(this).fadeTo(0, 0)

Answer 2

试试这个：

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

并选中“可见”复选框

使用IE 7或8时，如果隐藏，则单击标签不检查复选框

2 个答案: