checkbox的完美用户体验
最常见的checkbox的使用：
因为checkbox在高分辨率下，小方块会很小，很不容易点，这难免在用户体验上大打折扣。
下面看看我们的解决方法：
1、给checkbox配个label“老婆”（老婆的特点：必要的）：
for属性功能：表示lable标签要绑定的HTML元素，点击这个标签的时候，所绑定的元素将获取焦点。
补充： 除以上方法，还可以直接用 label 套嵌整个表单组件和文本标签，如：
根据规范这样文本会自动与邻接的表单组件关联，但遗憾的是 IE 并不支持这个特性。
2、给checkbox配个cursor:pointer“小蜜”（小蜜的特点：特周到）：
想起《大话西游里》唐僧的唠叨：“你想要啊？你要是想要的话你就说话嘛，你不说我怎么知道你想要呢，虽然你很有诚意地看着我，可是你还是要跟我说你想要的。你真的想要吗？那就拿去吧！你不是真的想要吧？难道你真的想要吗？…………”
这话说出了用户体验的精华，你不告诉用户，用户怎么知道这里能点击。所有我们需要给label加个属性（cursor:pointer）来告诉用户这里可以点击。
3、给checkbox配个accesskey“情人”（情人的特点：可取代）：
网站要兼顾更多类型的用户使用，比如某些从不使用鼠标，只使用键盘操作的用户，点击对于它们来说，已经没有任何意义，那我们该怎么做呢，最好的方法就是使用label的accesskey属性。
accesske属性功能：表示访问lable标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
注意：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
演示地址：http://www.planabc.net/demo/checkbox.html
<input type="checkbox" name="test" /> 点击这里没有任何效果
因为checkbox在高分辨率下，小方块会很小，很不容易点，这难免在用户体验上大打折扣。
下面看看我们的解决方法：
1、给checkbox配个label“老婆”（老婆的特点：必要的）：
<input type="checkbox" id="test" name="test" /><label for="test">点击这里就可以选中label</label>
for属性功能：表示lable标签要绑定的HTML元素，点击这个标签的时候，所绑定的元素将获取焦点。
补充： 除以上方法，还可以直接用 label 套嵌整个表单组件和文本标签，如：
<label><input type="checkbox" />点击这里就可以选中label</label>
根据规范这样文本会自动与邻接的表单组件关联，但遗憾的是 IE 并不支持这个特性。
2、给checkbox配个cursor:pointer“小蜜”（小蜜的特点：特周到）：
<input type="checkbox" id="test" name="test" /><label for="test" style="cursor:pointer">鼠标移到此处提示可点击，点击可选中label</label>
想起《大话西游里》唐僧的唠叨：“你想要啊？你要是想要的话你就说话嘛，你不说我怎么知道你想要呢，虽然你很有诚意地看着我，可是你还是要跟我说你想要的。你真的想要吗？那就拿去吧！你不是真的想要吧？难道你真的想要吗？…………”
这话说出了用户体验的精华，你不告诉用户，用户怎么知道这里能点击。所有我们需要给label加个属性（cursor:pointer）来告诉用户这里可以点击。
3、给checkbox配个accesskey“情人”（情人的特点：可取代）：
<input type="checkbox" id="test" name="test" /><label for="test" style="cursor:pointer" accesskey="1">鼠标移到此处提示可点击，点击可选中label，你也可以用键盘快捷方式来<span style="text-decoration:underline;">1</span>（Alt+1）来选择checkbox</label>
网站要兼顾更多类型的用户使用，比如某些从不使用鼠标，只使用键盘操作的用户，点击对于它们来说，已经没有任何意义，那我们该怎么做呢，最好的方法就是使用label的accesskey属性。
accesske属性功能：表示访问lable标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。
注意：accessKey属性所设置的快捷键不能与浏览器的快捷键冲突，否则将优先激活浏览器的快捷键。
演示地址：http://www.planabc.net/demo/checkbox.html
