1.多选按钮一般我们需要点中那个小方框，才可以选中该选项。那么我们能不能不点那个小方框，直接点该选项（文字或图片等）而进行选中呢？答案肯定是可以的，用label就可以实现，下面是一个简单的例子：
<label><input type="checkbox">同意服务条款</label> <br /> <input type="checkbox" id="checkforname" /> <label for="checkforname">不同意服务条款</label>
我们通过点击文字就能选中前面的方框，点击label标签中的文本，可使多选框聚焦。要使label的for 和选框的id名字对应。或者将label标签把选框和文本一起包围。
2.小方框太丑了我们能不能变成个图片呢，只要我们想~~~~一切都是可能的，看下面的例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .chk_div label{background: url(img/check_icogray.png) no-repeat; width: 232px; height: 32px; display: block; padding-left: 35px;padding-top: 5px;} .chk_div input[type=checkbox]:checked+label{background: url(img/check_icogreen.png) no-repeat;} </style> </head> <body> <div class="chk_div"> <input type="checkbox" value="dd" checked="checked" id="checkforbox" style="display: none;"> <label for="checkforbox">同意服务条款</label> </div> </body> </html>
我们利用了label，点击了label就等于点击了选择框，结合css的伪选择，就可以轻松的实现两个图片的点击切换（都不用js了O(∩_∩)O）