【转载】iCheck表单美化插件使用方法详解（含参数、事件等）

ゝ一世哀愁。 2022-01-31 17:07 281阅读 0赞

\*\*转载于：[https://www.cnblogs.com/caicaizi/p/6070136.html][https_www.cnblogs.com_caicaizi_p_6070136.html]

**iCheck**

**特色：**

1、在不同[浏览器][Link 1](包括[ie6][]\+)和设备上都有相同的表现 — 包括 桌面和移动设备

2、支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统

4、方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)

5、体积小巧 — gzip压缩后只有1 kb

6、25 种参数 用来定制复选框（checkbox）和[单选按钮][Link 2]（radio button）

7、8 个回调事件 用来监听输入框的状态

8、7个方法 用来通过编程方式控制输入框的状态

9、能够将输入框的状态变化同步回原始输入框中， 支持所有选择器

![iCheck插件表单美化效果图][iCheck]  
iCheck插件表单美化效果图

**使用方法：**

1.  $('input').iCheck('check');   //将输入框的状态设置为checked 
2.  $('input').iCheck('uncheck'); //移除 checked 状态 
3.  $('input').iCheck('toggle');  //toggle checked state 
4.  $('input').iCheck('disable'); //将输入框的状态设置为 disabled 
5.  $('input').iCheck('enable');  //移除 disabled 状态 
6.  $('input').iCheck('update');  //apply input changes, which were done outside the plugin 
7.  $('input').iCheck('destroy'); //移除iCheck样式

调用iCheck时，只需要将修改了默认值的参数列出来即可：

1.  //基础使用方法 
2.  $('input').iCheck(\{ 
3.    labelHover : false, 
4.    cursor : true, 
5.    checkboxClass : 'icheckbox\_square-blue', 
6.    radioClass : 'iradio\_square-blue', 
7.    increaseArea : '20%' 
8.  \});

下面是 [参数列表][Link 3]及其默认值：

1.  \{ 
2.   handle: '', 
3.   checkboxClass: 'icheckbox', 
4.   radioClass: 'iradio', 
5.   checkedClass: 'checked', 
6.   checkedCheckboxClass: '', 
7.   checkedRadioClass: '', 
8.   uncheckedClass: '', 
9.   uncheckedCheckboxClass: '', 
10.  uncheckedRadioClass: '', 
11.  disabledClass: 'disabled', 
12.  disabledCheckboxClass: '', 
13.  disabledRadioClass: '', 
14.  enabledClass: '', 
15.  enabledCheckboxClass: '', 
16.  enabledRadioClass: '', 
17.  hoverClass: 'hover', 
18.  focusClass: 'focus', 
19.  activeClass: 'active', 
20.  labelHover: true, 
21.  labelHoverClass: 'hover', 
22.  increaseArea: '', 
23.  cursor: false, 
24.  inheritClass: false, 
25.  inheritID: false, 
26.  insert: '' 
27. \}

我们可以对上面列出的任何class重置样式

**皮肤**

Black — minimal.css  //黑色

Red — red.css  //红色

Green — green.css  //绿色

Blue — blue.css  //蓝色

Aero — aero.css //win7中的那种玻璃效果

Grey — grey.css  //银灰色

Orange — orange.css  //橙色

Yellow — yellow.css  //[黄色][Link 4]

Pink — pink.css  //粉红色

Purple — purple.css  //紫色

（请自行下载这些皮肤包）

**初始化**

首先，引入jQuery库文件

其次，引入jquery.icheck.js插件文件

（如果要引入相关皮肤，则需引入：相关主题颜色.css文件）

**[ 回调][Link 5]事件**

iCheck支持所有选择器（selectors），并且只针对 [复选框][Link 6] [checkbox][]和单选radio按钮起作用

iCheck提供了大量回调事件，都可以用来监听 [change事件][change]

<table>  &nbsp;  
 <tbody> 
  <tr> 
   <th> &nbsp;事件名称</th> 
   <th> &nbsp;使用时机</th> 
  </tr> 
  <tr> 
   <td> &nbsp;ifClicked</td> 
   <td> &nbsp;用户点击了自定义的输入框或与其相关联的label</td> 
  </tr> 
  <tr> 
   <td> &nbsp;ifChanged</td> 
   <td> &nbsp;输入框的 checked 或 disabled 状态改变了</td> 
  </tr> 
  <tr> 
   <td> &nbsp;ifChecked</td> 
   <td> &nbsp;输入框的状态变为 checked</td> 
  </tr> 
  <tr> 
   <td> &nbsp;ifUnchecked</td> 
   <td> &nbsp;checked 状态被移除</td> 
  </tr> 
  <tr> 
   <td> &nbsp;ifDisabled</td> 
   <td> &nbsp;输入框状态变为 disabled</td> 
  </tr> 
  <tr> 
   <td> &nbsp;ifEnabled</td> 
   <td> &nbsp;disabled 状态被移除</td> 
  </tr> 
  <tr> 
   <td> &nbsp;ifCreated</td> 
   <td> &nbsp;输入框被应用了iCheck样式</td> 
  </tr> 
  <tr> 
   <td> &nbsp;ifDestroyed</td> 
   <td> &nbsp;iCheck样式被移除</td> 
  </tr> 
 </tbody> 
</table>

使用on()方法绑定事件：

1.  $('input').on('ifChecked', function(event)\{ //ifCreated 事件应该在插件初始化之前绑定 
2.    alert(event.type + ' callback'); 
3.  \});

bootstrap iCheck中的radio和checkbox的大小可以调整吗？

1.  .icheckbox\_square-blue, .iradio\_square-blue \{ 
2.    display: block; 
3.    margin: 0; 
4.    padding: 0; 
5.    width: 22px; 
6.    height: 22px; 
7.    background: url(blue.png) no-repeat; 
8.    border: none; 
9.    cursor: pointer; 
10. \}

如果要调整icheck的radio或checkbox样式，通过上面的css修改[width][]和height，同时修改blue.png图片对应的尺寸。

\*\*

[https_www.cnblogs.com_caicaizi_p_6070136.html]: https://www.cnblogs.com/caicaizi/p/6070136.html
[Link 1]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=%E6%B5%8F%E8%A7%88%E5%99%A8
[ie6]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=ie6
[Link 2]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=%E5%8D%95%E9%80%89%E6%8C%89%E9%92%AE
[iCheck]: /images/20220131/57d849f1e47b4a079dbbaf2b95ba97fd.png
[Link 3]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=%E5%8F%82%E6%95%B0%E5%88%97%E8%A1%A8
[Link 4]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=%E9%BB%84%E8%89%B2
[Link 5]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=%E5%9B%9E%E8%B0%83
[Link 6]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=%E5%A4%8D%E9%80%89%E6%A1%86
[checkbox]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=checkbox
[change]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=change%E4%BA%8B%E4%BB%B6
[width]: http://zhannei.baidu.com/cse/search?s=6401124197146456406&entry=1&q=width