icheck插件使用

 经常使用到icheck，总是遇到事件不执行，选中不了等情况，现记录下方便以后查找！

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

默认值使用如下：

$('input').iCheck({
 labelHover : false,
cursor : true,
checkboxClass : 'icheckbox_square-blue',
radioClass : 'iradio_square-blue',
increaseArea : '20%'
});

 

所有默认值：

    {
     handle: '',
     checkboxClass: 'icheckbox',
     radioClass: 'iradio',
     checkedClass: 'checked',
     checkedCheckboxClass: '',
     checkedRadioClass: '',
     uncheckedClass: '',
     uncheckedCheckboxClass: '',
     uncheckedRadioClass: '',
     disabledClass: 'disabled',
     disabledCheckboxClass: '',
     disabledRadioClass: '',
     enabledClass: '',
     enabledCheckboxClass: '',
     enabledRadioClass: '',
     hoverClass: 'hover',
     focusClass: 'focus',
     activeClass: 'active',
     labelHover: true,
     labelHoverClass: 'hover',
     increaseArea: '',
     cursor: false,
     inheritClass: false,
     inheritID: false,
     insert: ''
    }

样式皮肤：

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  //黄色
Pink — pink.css  //粉红色
Purple — purple.css  //紫色

iCheck初始化

首先，引入jQuery库文件
其次，引入jquery.icheck.js插件文件，（如果要引入相关皮肤，则需引入：相关主题颜色.css文件）

回调事件：

iCheck支持所有选择器（selectors），并且只针对复选框checkbox和单选radio按钮起作用
iCheck提供了大量回调事件，都可以用来监听change事件

 ifClicked                      用户点击了自定义的输入框或与其相关联的label
 ifChanged      输入框的 checked 或 disabled 状态改变了
 ifChecked      输入框的状态变为 checked
 ifUnchecked      checked 状态被移除
 ifDisabled      输入框状态变为 disabled
 ifEnabled      disabled 状态被移除
 ifCreated      输入框被应用了iCheck样式
 ifDestroyed      iCheck样式被移除

 使用on()方法绑定事件：
    $('input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定
      alert(event.type + ' callback');
    });

bootstrap iCheck中的radio和checkbox的大小可以调整吗？
    .icheckbox_square-blue, .iradio_square-blue {
      display: block;
      margin: 0;
      padding: 0;
      width: 22px;
      height: 22px;
      background: url(blue.png) no-repeat;
      border: none;
      cursor: pointer;
    }
如果要调整icheck的radio或checkbox样式，通过上面的css修改width和height，同时修改blue.png图片对应的尺寸。

 

原文摘自：https://www.exp99.com/jswz/f2e/1408696007_34.html