優化checkbox和radio，類似Bootstrap中的iCheck

checkbox和radio浏覽器預設的已經滿足不了大衆的審美需求，更不用說浏覽器之間的差異化，取而代之，優化checkbox和radio的方法也随之誕生了。

html結構：

單選框為例，簡單說明： 

其中必需項包括：class="radio"

和 name="名稱" 

css表現：

transition介紹：元素從一種樣式逐漸改變為另一種的效果。

transition 簡寫屬性，用于在一個屬性中設定四個過渡屬性。 

transition-property 規定應用過渡的 css

屬性的名稱。 

transition-duration 定義過渡效果花費的時間。預設是

0。 

transition-timing-function 規定過渡效果的時間曲線。預設是

"ease"。 

transition-delay 規定過渡效果何時開始。預設是 0。

.checkbox,.radio{display: inline-block;*display: inline;*zoom:1;height: 24px;

line-height: 24px; margin-right: 20px;}

.checkbox ins,.radio ins{display:

inline-block;*display: inline;*zoom:1; width: 23px; height: 22px;

vertical-align: middle; background:

url(http://www.bootcss.com/p/icheck/skins/square/blue.png) no-repeat;

margin-right: 8px; -webkit-transition:all 0.1s linear; -moz-transition:all 0.1s

linear; -o-transition:all 0.1s linear; -ms-transition:all 0.1s linear;

transition:all 0.1s linear;vertical-align: middle;}

.radio

ins{background-position: -120px 0px; }

.radio .hover{background-position:

-144px 0px;}

.radio .checked{background-position: -168px 0px;}

.enable{background-position: -214px 0px;}

.disabled{background-position: -191px 0px;}

.checkbox span,.radio

span{display: inline-block;*display: inline;*zoom:1;vertical-align: middle;

}

js代碼：

點選事件，滑鼠移入移出事件，備注：移動端僅支援點選即可。

點選事件為例：document.on("click",".radio",function(){...})

demo：

運作代碼