图片代替多选（单选）按钮

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）