論checkbox和radio的樣式美化問題

如果你下定決心要改變現有的預設的checkbox和radio的樣式，那麼我目前有兩種辦法：

1、自己動手寫一個，也就是自己寫代碼實作将input的checkbox和radio預設的樣式隐藏掉，使用絕對定位的方式，手動切換checked和unchecked的圖檔，定位到原來input顯示的地方；

2、使用jQuery的iCheck插件 。

     中文DOC位址：http://www.bootcss.com/p/icheck/

     github位址：https://github.com/fronteed/iCheck

一、先來說說第一種辦法吧，我覺得這個是最好的，又不用多添加js，自己寫幾行代碼就行了。

demo如下：

這是一個朋友（大牛）教我的方法，代碼又少，寫得又好，我也很喜歡。

這裡面有的說的我感覺就是attr()和prop()方法，以前我沒覺得有什麼不同。但實際上還是有差別，簡單來說吧，如果你想得到字元串的屬性值的話那麼就要用attr(),但如果你的本意是獲得bool值得話，那麼就要用prop()了。

二、那麼如果你的項目比較大，相容性封裝性等各個方面要求比較嚴格的話，那麼你可以嘗試一下iCheck插件，但我目前還存在問題，如果你的checkbox和radio的功能比較簡單的話，那麼沒有任何問題，但是如果你有全選部分選擇的功能的話，那麼你可能要花點心思了，我現在列出我的使用方法和心得，如果你有更好的解決其中問題的方法的話，請教教我喔，感激不盡。

簡單使用真的簡單，demo如下：

然後去下載下傳iCheck.js和像grey.css（多種可選）這樣的樣式檔案就可以了，簡單的就可以換樣式了喔。

但是如果你想用到項目裡，可能就沒這麼簡單了。我踩過的坑有：

      1、雖然iCheck的實作原理是在input外包裹一層div用來實作樣式圖檔的切換，跟我們手動實作的原理差不多，但是雖然我們可能在浏覽器中不容易顯示的看出來，實際上input的checked屬性也已經切換了；

      2、如果你的input部分是在js中動态寫進去的話，那麼就要注意你有關iCheck的代碼的位置，一定要等到dom全部加載完成之後。iCheck才會起作用。

      3、還有一個還沒有邁出來的坑，如果你的項目這個相關的功能需要完成，那麼你可能需要在回調函數中完成一些操作，我的問題就在于，裡面的操作實際上已經完成了（控制台可檢視），但是我在其中調用的iCheck（）方法，卻不起作用了，看了很多github上的issue，相同問題很多。

like this：

我也嘗試過換2.x版本，但問題似乎更多，待解。

如果你也在換掉checkbox和radio預設的醜樣式，兩種方法都可任你選擇。