我正在尝试使用与复选框元素相关联的标签创建自定义设计的复选框,并隐藏(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