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