这里比较关键的一点是用到label的for属性。
w3c的label介绍：
<label> 标签为 input 元素定义标注（标记）。label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
<label> 标签的 for 属性应当与相关元素的 id 属性相同。
所以当我们为label用for属性绑定了指定元素id时候，只要我们点击label，就会触发绑定的元素。可以在w3c查看例子。http://www.w3school.com.cn/tiy/t.asp?f=html_label
好了原理讲明白后，就可以开始自定义我们的radio和checkbox。大致思路就是用label绑定radio，然后设置radio为不显示，在自定义label的样式就行了。
html代码：
<div class="testOptions">
<ul>
<li><input type="radio" id="radio01" name="check"><label for="radio01"></label>选项</li>