Bootstrap-用ICheck插件給CheckBox換新裝

直接來吧！

下面是添加上復選框以后的樹形菜單效果：

 

這樣看起來有種驢唇不對馬嘴的感覺。 
所以就要想辦法給這些復選框添加1些樣式，讓全部界面看起來搭配1些。

通過查詢得知，有個叫ICheck的第3方Bootstrap插件，專門用於給復選框，單選框添加漂亮的樣式。

可以查看官方網站：http://www.bootcss.com/p/icheck/ 進行了解。 
ICheck插件提供幾套非常好看的皮膚，供我們選擇。

最簡皮膚 

 

Square皮膚 

 

Flat皮膚 

 

Polaris 皮膚 

 

下面以Square皮膚為例，說明如何利用這個插件：

1. 下載： https://github.com/HerbertKarajan/UI-iCheck   下載ICheck插件的緊縮包。
2. 拷貝：把icheck.js、blue.css、blue.png、[e-mail]這1套文件拷貝到項目目錄下
3. 援用：添加對icheck.js文件和blue.css文件的援用。<link href="blue.css" rel="stylesheet">和<script src="http://www.wfuyu.com/uploadfile/cj/20150307/icheck.js"></script>
4. JS：在html中添加1段JS代碼

//給單選框復選框添加樣式 $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', radioClass: 'iradio_square-blue', increaseArea: '20%' // optional });

注意：blue.css、blue.png、[e-mail]，這3個文件保證了皮膚為藍色，更換其他色彩需要同時更換這3個文件。

特別注意：事件綁定！ Icheck把CheckBox和ComboBox的事件名稱進行了更改。這點要特別注意，見下圖： 

 

然后使用on()方法綁定事件：

$('input').on('ifChecked', function(event){ alert(event.type + ' callback'); });

還有ICheck提供了1些方法可以實現通過編程方式改變輸入框狀態：比如, 
$('input').iCheck('check'); ― 將輸入框的狀態設置為checked 
$('input').iCheck('uncheck'); ― 移除 checked 狀態 
等等。

下面這幅圖是使用ICheck插件后樹形菜單的樣式：