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）