iCheck插件使用

最近项目里正好用到这个插件，奈何记性不好 ，每次都得查资料，写在这里一劳永逸，欢迎大家提意见，共勉。好啦，上代码。

1.引用对应文件

首先需要去下载icheck插件必要的js和css文件，贴一个非唯一的下载地址：

http://plugins.jquery.com/icheck/1.0.1/

此插件是依赖jquery的，一定要先加载jquery.js。如何引用js和css我就不赘述了，差不多目录如下：

//案例里的css，可以不加
<link href="./css/custom.css?v=1.0.2" rel="stylesheet">
//这里包含所有的样式，你也可以单独加载你要的形状颜色的css，文件夹分得很细
<link href="../skins/all.css?v=1.0.2" rel="stylesheet">
<script src="./js/jquery.js"></script>
<script src="../icheck.min.js?v=1.0.2"></script>
//案例里的js,可以省略
<script src="./js/custom.min.js?v=1.0.2"></script>

 

2.初始化调用

 

//html部分 横排竖排布局可以通过给ul，li加样式实现
//从案例摘抄出来的，有疑问访问网站https://github.com/fronteed/icheck/blob/1.x/demo/index.html
<ul class="list">
   <li>
      <input type="checkbox" id="square-checkbox-disabled-checked" checked disabled>
      <label for="square-checkbox-disabled-checked">Disabled & checked</label>
    </li>
    <li>
      <input tabindex="11" type="radio" id="square-radio-1" name="square-radio">
      <label for="square-radio-1">Radio button 1</label>
    </li>
  </ul>

//js部分 初始化
$(function(){
 $('.skin-square input').iCheck({
    checkboxClass: 'icheckbox_square-green',//多选框样式
    radioClass: 'iradio_square-green',//单选框样式
    increaseArea: '20%
    })
})

 

3.常用的回调函数

 

回调函数名称 	使用情景
ifClicked 	user clicked on a customized input or an assigned label（点击input或者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（切换到可操作状态时）

//通过on来调用
$('input').on('ifChecked',function(event){
  alert(event.type + ' callback');
});

4.常用的方法

// change input's state to checked改变状态为选中
$('input').iCheck('check'); 
// remove checked state（改变状态为为选中）
$('input').iCheck('uncheck'); 
//toggle checked state（切换选中状态）
$('input').iCheck('toggle');
//change input's state to disabled（让input不可操作）
$('input').iCheck('disable'); 
// remove disabled state（让input可操作）
$('input').iCheck('enable');
// change input's state to indeterminate（改变状态为半选中状态）
$('input').iCheck('indeterminate');
//remove indeterminate state（删掉半选中状态）
$('input').iCheck('determinate'); 
// apply input changes, which were done outside the plugin（更新icheck的选中状态，这个做清空操作很有用）
$('input').iCheck('update'); 
// remove all traces of iCheck （移除iCheck样式）
$('input').iCheck('destroy'); 
//也可以用下面的方式添加其他的js效果
$('input').iCheck('check', function(){
  alert('Well done, Sir');
});