icheck的使用

一、什么是icheck

就是用来美化单选框、复选框的。

 

二、如何使用

1、下载

到 github 下载。https://github.com/fronteed/icheck

下载完毕、解压、目录结构如下：

 

2、选皮肤

icheck有6种好看的皮肤、分别是极小的、正方形的、平滑的、线形的、北极星、未来。前面四种皮肤又都有10种不同的颜色。分别为黑、红、绿、蓝、青、灰、橘、黄、粉、紫。

我们可以点开demo\index.html文件进行预览、这里面在展现效果的同时也介绍了详细的用法。个人觉得前面三种皮肤较为常用。效果分别如下：

 

3、使用一种皮肤但多种颜色的文件配置

比如这里我们使用方形皮肤。

第一步，新建 icheck 文件夹、把 skins\square 文件夹和 icheck.min.js 放到 icheck 文件夹里。

第二步，打开 icheck\skins\square文件夹，把里面除了 _all.css 以后的所有css文件全部删除。因为我们这里是可以使用多种颜色的，这个_all.css就有全部的样式。

第三步，在需要的页面按顺序引入以下这三个文件。

<link rel="stylesheet" href="icheck/square/_all.css">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="icheck/icheck.min.js"></script>　　

第四步，启动icheck插件。

$('input[type=radio],input[type=checkbox]').iCheck({
    checkboxClass: 'icheckbox_square-red',   // 可以更改red换颜色
    radioClass: 'iradio_square-red',
    increaseArea: '20%' // optional
});　

 第五步，效果完成，如下：

 

4、使用一种皮肤一种颜色的文件配置

这种就比较简洁了，把多余的颜色文件都删了，比如我们使用方形的蓝色皮肤，具体使用方法和上面差不多，就是有如下区别，

第一步，相同

第二步，打开 icheck\skins\square文件夹，把里面除了 blue.css、blue.png、blue@2x.png 以外的所有文件全部删除。因为我们这里只需要蓝色。

第三步，在需要的页面按顺序引入以下这三个文件。

<link rel="stylesheet" href="icheck/square/blue.css">
<script src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script src="icheck/icheck.min.js"></script>

第四步，启动icheck插件。

$('input[type=radio],input[type=checkbox]').iCheck({
    checkboxClass: 'icheckbox_square-blue',   // 不可以更改颜色了
    radioClass: 'iradio_square-blue',
    increaseArea: '20%'
});

第五步，效果完成，如下：

 

三、icheck的一些回调

1、ifChanged

触发时机：选框状态改变时触发

$('input[type=checkbox]').on('ifChanged', function(obj){
    console.log($(this).val());   // 获取该复选框的value值
    console.log(obj.currentTarget.checked)   // 获取该复选框当前状态是否选中
    console.log('您更改了复选框的状态');
})

 

2、ifChecked

触发时机：选框选中时触发

$('input[type=checkbox').on('ifChecked', function(obj){
    console.log($(this).val());   // 获取该复选框的value值
    console.log('您选中了复选框');
})

 

3、ifUnchecked

触发时机：选框取消选中时触发

$('input[type=checkbox').on('ifUnchecked', function(obj){
    console.log($(this).val());   // 获取该复选框的value值
    console.log('您取消选中了复选框');
})

 

四、icheck以编程方式进行更改

1、将选框选中

$('input[type=checkbox]').iCheck('check');

 

2、将选框取消选中

$('input[type=checkbox]').iCheck('uncheck');

 

3、将选框的状态反向切换

$('input[type=checkbox]').iCheck('toggle');

 

4、将选框禁用

$('input[type=checkbox]').iCheck('disable');

 

5、将选框取消禁用

$('input[type=checkbox]').iCheck('enable');

 

五、提交时获取选中选框的值

$('button').on('click', function(){
    $('input[type=checkbox]').each(function(){
        if($(this).prop('checked')){
            console.log($(this).val());
        }
    })
})

 

转载于:https://www.cnblogs.com/xulinjun/p/11245004.html