Query中的插件非常多，jQuery Validate就是专门用来在前端页面上做表单验证的；在做表单的时候，除了验证，我们可能还会希望表单中的checkbox、radio的样式能够美观一些，这个时候jQuery iCheck就能派上大用场。
从jQuery iCheck的官网上可以看到，这一款插件于2013年12月19日发布1.0.1版本，2014年3月3日发布1.0.2版本，时至今日也有七八年时间，已经不算太新的插件了。这么好的插件，怎么到今日才遇到它，相恨遇晚呀，一定要先用起来。
概要
表单复选框、单选框控件美化插件，主要作用为：
-
渲染并美化当前页面的复选框或单选框
-
响应复选框或单选框的点击事件
简介
jQuery iCheck是表单复选框、单选框控件的样式美化插件，样式渲染和美化过后，原来的某些事件可能就失去了作用，这时就需要用插件内置的回调事件，来监听Change事件了。
页面引用
css部分
<link href="../skins/all.css?v=1.0.2" rel="stylesheet">
js部分
<script src="../icheck.js?v=1.0.2"></script>
激活iCheck
即使引用了CSS、JS文件，默认情况下iCheck还是不生效的，可以结合CSS用js来激活；既可以全局激活，也可以局部激活；
回调事件
iCheck 提供了大量回调事件，都可以用来监听 change 事件
事件名称 | 何时使用
ifClicked | 用户点击了自定义的输入框或与其相关联的 label
ifChanged | 输入框的 checked 或 disabled 状态改变了
ifChecked | 输入框的状态变为 checked
ifUnchecked | checked 状态被移除
ifDisabled | 输入框状态变为 disabled
ifEnabled | disabled 状态被移除
ifCreated | 输入框被应用了 iCheck 样式
ifDestroyed | iCheck 样式被移除
比较全的英文版
ifClicked | user clicked on a customized input or an assigned label
ifChanged | input's checked, disabled or indeterminate state is changed
ifChecked | input's state is changed to checked
ifUnchecked | checked state is removed
ifToggled | input's checked state is changed
ifDisabled | input's state is changed to disabled
ifEnabled | disabled state is removed
ifIndeterminate | input's state is changed to indeterminate
ifDeterminate | indeterminate state is removed
ifCreated | input is just customized
ifDestroyed | customization is just removed
方法
下面这些方法可以用来通过编程方式改变输入框状态（可以使用任何选择器）：
$('input').iCheck('check'); — change input's state to checked
将输入框的状态设置为checked
$('input').iCheck('uncheck'); — remove checked state
移除checked状态
$('input').iCheck('toggle'); — toggle checked state
切换事件
$('input').iCheck('disable'); — change input's state to disabled
将输入框的状态设置为disable，禁用点击
$('input').iCheck('enable'); — remove disabled state
移除disabled状态，变为可点击状态
$('input').iCheck('indeterminate'); — change input's state to indeterminate
$('input').iCheck('determinate'); — remove indeterminate state
$('input').iCheck('update'); — apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); — remove all traces of iCheck
简单示例：
<html lang="en">
<head>
<title>Checkboxes and radio buttons customization (jQuery and Zepto) plugin</title>
<meta charset="utf-8">
<meta content="width=device-width" name="viewport">
<!--jQuery iCheck样式文件，包括各种皮肤-->
<link href="../skins/all.css?v=1.0.2" rel="stylesheet">
<!--基于jquery1.7以上版本-->
<script src="./js/jquery.js"></script>
<!--jQuery iCheck js文件-->
<script src="../icheck.js?v=1.0.2"></script>
<script type="text/javascript" >
$(document).ready(function() {
//对样式进行美化，即可全局渲染，也局部渲染，这里是全局渲染
$('input[type="checkbox"],input[type="radio"]').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue'
});
});
</script>
</head>
<body>
<div>
<p >
<span>第一个示例,复选框示例</span>
<input tabindex="1" type="checkbox" name="interest" id="input-1" value="跑步" />
<label for="input-1">跑步</label>
<input tabindex="2" type="checkbox" name="interest" id="input-2" value="唱歌" />
<label for="input-2">唱歌</label>
<input tabindex="3" type="checkbox" name="interest" id="input-3" value="画画" />
<label for="input-3">画画</label>
</p>
<script>
$(document).ready(function() {
var arr = [];
//监听选中和未选中事件
$("input[name='interest']").on('ifChecked ifUnchecked',function(){
//被选中时
if($(this).is(':checked')){
arr.push($(this).val());
}else{
var index = arr.indexOf($(this).val());
if (index > -1) {
arr.splice(index, 1);
}
}
alert("你选择了："+arr);
});
});
</script>
</div>
<div>
<p >
<p >
<span>第二个示例,单选框示例</span>
<input type="radio" name="sex" id="sex-1" value="男" />
<label for="sex-1">男</label>
<input type="radio" name="sex" id="sex-2" value="女" />
<label for="sex-2">女</label>
</p>
<script>
$(document).ready(function() {
//监听选中和未选中事件
$("input[name='sex']").on('ifChanged',function(){
alert("你选择了："+$(this).val());
});
});
</script>
</div>
<div>
<p class="skin skin-square" >
<span>第三个示例,皮肤切换</span>
<input type="checkbox" name="interest1" id="input-11" value="跑步" />
<label for="input-11">跑步</label>
<input type="checkbox" name="interest1" id="input-21" value="唱歌" />
<label for="input-21">唱歌</label>
<input type="checkbox" name="interest1" id="input-31" value="画画" />
<label for="input-31">画画</label>
<input type="radio" name="sex1" id="sex-1" value="男" />
<label for="sex-1">男</label>
<input type="radio" name="sex1" id="sex-2" value="女" />
<label for="sex-2">女</label>
</p>
<div>
<ul class="colors">
<li class="red" title="Red">red</li>
<li class="green active" title="Green">green</li>
<li class="blue" title="Blue">blue</li>
<li class="aero" title="Aero">aero</li>
<li class="grey" title="Grey">grey</li>
<li class="orange" title="Orange">orange</li>
<li class="yellow" title="Yellow">yellow</li>
<li class="pink" title="Pink">pink</li>
<li class="purple" title="Purple">purple</li>
</ul>
</div>
<script>
$(document).ready(function() {
//皮肤初始化，默认绿色
$('.skin-square input').iCheck({
checkboxClass: 'icheckbox_square-green',
radioClass: 'iradio_square-green',
increaseArea: '20%'
});
//皮肤切换
$('.colors li').click(function() {
var self = $(this);
if (!self.hasClass('active')) {
//移除已有的选中样式
self.siblings().removeClass('active');
//获取当前的皮肤
var color = '-' + self.attr('class');
//皮肤重新设定
$('.skin-square input').iCheck({
checkboxClass: 'icheckbox_square'+color,
radioClass: 'iradio_square'+color,
increaseArea: '20%'
});
//设置选中
self.addClass('active');
};
});
});
</script>
</div>
</body>
</html>
在这里一共写了三个简单的示例，都是比较常用的；
第一个示例，是复选框的点击与获取；
第二个示例是单选框的选择域获取；
第三个是皮肤切换示例；
三个例子都比较简单，一看就会；还有其他的事件和方法，在需要的时候再试一试吧。
示例效果
参考资料：
官网 https://plugins.jquery.com/icheck/
官网demo下载地址 https://github.com/fronteed/icheck
JQuery系列笔记：
还在为表单批量验证烦恼，看看使用jquery.validate如何做
网友评论