使用icheck插件实现复选框、单选框控件美化

icheck插件github地址：https://github.com/fronteed/icheck

icheck插件的简单使用

1：引入css

<link rel="stylesheet" href="/icheck/skins/all.css">

2：引入js

 <!--引入jquery-->  
<script src="/js/jquery.min.js"></script>  
<!--引入icheck-->  
<script src="/icheck/icheck.min.js"></script>

3:复选框使用

(1)html

<label for="fuxuan[1]">复选一</label>  
<input type="checkbox" name="fuxuan[1]" id="fuxuan[1]"/>  
<label for="fuxuan[2]">复选二</label>  
<input type="checkbox" name="fuxuan[2]"  id="fuxuan[2]"/>  
<label for="fuxuan[3]">复选三</label>  
<input type="checkbox" name="fuxuan[3]"  id="fuxuan[3]"/>  

(2)js

//初始化  
$('input[type="checkbox"]').iCheck({  
    checkboxClass: 'icheckbox_flat-blue',  
}); 

现象如下：

4：单选框使用

(1)html

<label for="danxuan[1]">单选一</label>  
<input type="radio" name="danxuan" id="danxuan[1]"/>  
<label for="danxuan[2]">单选二</label>  
<input type="radio" name="danxuan"  id="danxuan[2]"/>  
<label for="danxuan[3]">单选三</label>  
<input type="radio" name="danxuan"  id="danxuan[3]"/>

(2)js

//初始化  
$('input[type="radio"]').iCheck({  
    radioClass   : 'iradio_flat-blue'  
});

现象如下：

5：icheck插件的常用时间

(1)：ifClicked(点击事件)

$('input').on('ifClicked', function(event){  
    alert('点击事件');  
});  

(2)：ifChanged(改变事件)

$('input').on('ifChanged', function(event){  
    alert('改变事件');  
});

(3)：ifChecked(选中事件)

$('input').on('ifChecked', function(event){  
    alert('选中事件');  
});