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、blue@2x.png这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、blue@2x.png，这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插件后树形菜单的样式：