iCheck是GitHub上一款老牌的jQuery表单美化插件，专门用来替换浏览器原生的checkbox和radio控件。原生控件的最大问题在于不同操作系统、不同浏览器渲染出来的样子完全不一致：Windows下是方块加勾，macOS下是圆角带渐变，移动端又可能是另一副面孔，很难与精心设计的页面风格协调。iCheck的做法是用div结构完全重绘控件外观，同时保留原生input在DOM中的位置，因此在表单提交、checked属性读写上与原生行为完全兼容，迁移成本几乎为零。
iCheck插件的引入与基本初始化
使用iCheck需要引入两个文件：插件的JS脚本和对应皮肤的CSS样式表。你可以从官方仓库下载后放到本地，也可以直接引用CDN资源。需要注意的是，iCheck依赖jQuery（1.6以上版本均可），所以jQuery必须先于iCheck引入。
<!-- 引入jQuery --> <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script> <!-- 引入iCheck皮肤样式，这里以Minimal皮肤为例 --> <link href="icheck/skins/minimal/minimal.css" rel="stylesheet"> <!-- 引入iCheck脚本 --> <script src="icheck/icheck.min.js"></script>
HTML结构不需要任何改动，就是普通的input标签：
<label> <input type="checkbox" id="agree"> 我已阅读并同意服务条款 </label> <label> <input type="radio" name="payType" value="alipay"> 支付宝 </label> <label> <input type="radio" name="payType" value="wechat"> 微信 </label>
初始化只需要一行调用，iCheck会自动识别input的type是checkbox还是radio，套用对应的外观：
$(document).ready(function () {
// 初始化页面所有checkbox和radio
$('input').iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal',
increaseArea: '20%' // 允许的可点击区域
});
});上面代码中的increaseArea参数用来扩大可点击范围，值为20%表示在控件四周多出20%的区域也可以触发点击，这在移动端对提升操作体验很有帮助。
五套内置皮肤与自定义配色
iCheck自带Minimal、Flat、Square、Polaris、Futurico五套皮肤，每套皮肤都提供了红、绿、蓝、黄、紫、灰、粉等多种颜色。换皮肤只需要更换CSS文件路径，并同步修改初始化参数中的class名即可。例如使用Flat皮肤的绿色主题：
<!-- 换成Flat绿色皮肤的样式 --> <link href="icheck/skins/flat/green.css" rel="stylesheet">
$('input').iCheck({
checkboxClass: 'icheckbox_flat-green',
radioClass: 'iradio_flat-green'
});如果想匹配项目自己的品牌色，直接修改皮肤CSS里的几个颜色值就可以，iCheck的皮肤样式非常简洁，核心就是普通、hover、checked、disabled几种状态各一个背景图定位。还有一种更灵活的方式：定义自己的class，在CSS里覆盖背景色，比如用纯CSS绘制一个带勾的选中状态。
除了皮肤参数，初始化时常用的选项还有checkedClass、checkedCheckboxClass等状态class名，一般保持默认即可。需要禁用某个控件时，先给原生input设置disabled属性再初始化，iCheck会自动渲染出禁用态；如果是运行时动态禁用，需要在设置属性后手动调用$el.iCheck('update')刷新外观。
ifChecked等回调事件的使用
iCheck美化后的控件，原生change事件的触发时机和预期可能不一致，因此插件提供了一组自己的事件。最常用的是以下几个：
- ifChecked：控件被选中时触发，checkbox和radio通用
- ifUnchecked：checkbox被取消选中时触发，radio不适用
- ifToggled：选中状态发生切换时触发，无论选中还是取消
- ifChanged：input的checked状态变化时触发
- ifDisabled / ifEnabled：控件禁用或启用时触发
- ifCreated / ifDestroyed：控件被初始化或销毁时触发
事件绑定的写法有两种，一种是初始化时以配置项形式传入：
$('input').iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'iradio_minimal'
}).on('ifChecked', function (event) {
alert('选中了：' + this.value);
});另一种是链式调用，直接在jQuery对象上监听：
// 监听单选框选择，this指向原生input元素
$('input[name="payType"]').on('ifChecked', function (event) {
console.log('用户选择了：' + $(this).val());
});
// 监听复选框取消选中
$('#agree').on('ifUnchecked', function (event) {
console.log('用户取消了勾选');
});
// 只要是状态切换都要处理，用ifToggled
$('#subscribe').on('ifToggled', function (event) {
var checked = $(this).prop('checked');
console.log('当前状态：' + (checked ? '已勾选' : '未勾选'));
});需要注意的是，回调函数中的this指向的是原生DOM的input元素，而不是iCheck渲染出来的外层div。如果要操作被美化后的容器，可以通过$(this).closest('.icheckbox_minimal')这样的方式找到，这在需要给选中项加高亮边框等场景中很实用。
用API方法控制选中状态与动态渲染
一个新手常踩的坑是：直接用$(el).prop('checked', true)去改变选中状态，结果界面上毫无反应。这是因为iCheck的外观是由它自己维护的，绕过插件直接改原生属性后必须调用update方法同步。正确做法是使用iCheck提供的API：
// 勾选复选框（会正确更新外观）
$('#agree').iCheck('check');
// 取消勾选
$('#agree').iCheck('uncheck');
// 切换状态
$('#agree').iCheck('toggle');
// 禁用和启用
$('#agree').iCheck('disable');
$('#agree').iCheck('enable');
// 原生属性被外部代码改动后，手动同步外观
$('#agree').iCheck('update');
// 销毁插件，恢复原生控件
$('#agree').iCheck('destroy');这些API方法内部会处理好状态变更和外观更新，并且在调用check、uncheck、toggle时会正常触发对应的ifChecked等事件，业务逻辑监听不会丢失。所以只要页面用了iCheck，就应该统一通过API操作状态，保持一致性。
对于动态添加到页面的表单元素，iCheck不会自动生效，需要在元素插入DOM后重新初始化。典型的场景是AJAX加载一个表单：
$.get('/api/form', function (html) {
var $form = $(html).appendTo('#container');
// 只对新插入的input初始化
$form.find('input[type="checkbox"], input[type="radio"]').iCheck({
checkboxClass: 'icheckbox_minimal',
radioClass: 'icheckbox_minimal'.replace('checkbox', 'radio')
});
});另一个常见需求是全选和批量控制。利用事件冒泡特性，可以给容器统一绑定回调，配合API实现联动：
// 全选/取消全选
$('#checkAll').on('ifChanged', function () {
var checked = $(this).prop('checked');
$('.item-check').iCheck(checked ? 'check' : 'uncheck');
});
// 子项联动全选框状态
$('.item-check').on('ifToggled', function () {
var total = $('.item-check').length;
var checked = $('.item-check:checked').length;
if (checked === total) {
$('#checkAll').iCheck('check');
} else if (checked === 0) {
$('#checkAll').iCheck('uncheck');
}
});总结
iCheck的整体使用思路可以概括为三步：引入皮肤CSS和脚本、初始化并指定皮肤class、通过ifChecked等事件和check、uncheck等API完成交互逻辑。它的优点是体积小、皮肤多、兼容到IE8，而且完全保留原生input，不影响表单序列化提交。缺点是依赖jQuery，如果项目已经迁移到Vue或React等框架，更建议用CSS自定义appearance属性或框架生态内的组件库。但在传统的jQuery页面、后台管理系统中，iCheck依然是一个省心可靠的表单美化方案。
jQuery iCheck复选框美化单选框样式修改时间：2026-09-08 20:25:17