由于各浏览器对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();
});
