IE下checkbox或radio隐藏bug

由于各浏览器对checkbox或radio的渲染效果各不相同，为了美化和统一界面样式，一般会选择用js和css来自定义checkbox或radio的样式，此时一般会隐藏原始的checkbox或radio，用自定义的icon来显示

HTML：

<div class="checkbox"> <label for="filter_1"><input type="checkbox" name="activities" id="filter_1" value="Activities" checked="checked" />Activities</label> <label for="filter_2"><input type="checkbox" name="services" id="filter_2" value="Services" />Services</label> </div> <div class="radio-group"> <label for="male"><input type="radio" name="gender" id="male" value="Activities" checked="checked" />Male</label> <label for="female"><input type="radio" name="gender" id="female" value="Services" />Female</label> </div>

CSS:

input[type=checkbox], input[type=radio] { display: none; } input[type=checkbox], input[type=radio] { visibility: hidden; } 以上两种写法在IE下会有点击label后checkbox或radio无法选中的bug, 解决此bug有以下几种方案：

1. 用css的其他方法实现checkbox或raido的隐藏

input[type=checkbox], input[type=radio] { /*#1 将checkbox和radio放到可视区以外 */ position: absolute; top: -50px; left: -50px; /*#2 或者将checkbox和radio宽度设计为0 */ width: 0; /*#3 或者将checkbox和radio透明度设置为0 */ -moz-opacity:0; filter:alpha(opacity:0); opacity:0; }

2. 用js解决

$("label").click(function(e){ e.preventDefault(); $("#"+$(this).attr("for")).click().change(); });

相关资源：IE在DOM操作有表单控件时的bug