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、[e-mail] 以外的所有文件全部刪除。因為我們這里只需要藍色。

第三步，在需要的頁面按順序引入以下這三個文件。

<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());
        }
    })
})