JQery icheck 插件

<script type="text/javascript">
  $(document).ready(function(){
    var callbacks_list = $('.demo-callbacks');
    $('.demo-list input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){
    }).iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%',
    });
  });
</script>


 1 <div class="col-sm-3 col-md-offset-5 demo-list">
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label><input type="radio" class="form-control" >遲到扣款除於當月全勤人數</label>
                        </div>
                        <div class="form-group">
                            <label><input type="radio" class="form-control" >固定</label><input type="text" class="form-control xztable_select_s margin5" >/人/月
                        </div>
                    </form>
</div>

加載icheck.js

<?php
/**
 * Created by PhpStorm.
 * User: Administrator
 * Date: 2016/1/18
 * Time: 16:27
 */
use yii\web\View;
use yii\helpers\Url;
use app\assets\AppAsset;
use yii\helpers\Html;

AppAsset::addScript($this, '@web/assets/Public/static/icheck/custom.min.js');
AppAsset::addScript($this, '@web/assets/Public/static/icheck/icheck.js');
?>

 

如上所示 ，實際項目中用到的例子。

首先引入jQuery v1.7+ (或 Zepto)，然后引入jquery.icheck.js (或者zepto.icheck.js) 。

iCheck支持所有選擇器（selectors），並且只針對復選框和單選按鈕起作用

<script src="../Public/static/icheck/icheck.js" type="text/javascript"></script>
<script src="../Public/static/icheck/custom.min.js" type="text/javascript"></script>

回調事件

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){
  alert(event.type + ' callback');
});

方法

下面這些方法可以用來通過編程方式改變輸入框狀態（可以使用任何選擇器）：

$('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樣式

 

使用方法：

1、選擇你要使用的皮膚樣式主題，共6個

flat, futurico, line, minimal, polaris, square

每個皮膚底下有好幾個可以選擇的顏色，例如：

Black — square.css

Red — red.css

Green — green.css

Blue — blue.css

Aero — aero.css

Grey — grey.css

Orange — orange.css

Yellow — yellow.css

Pink — pink.css

Purple — purple.css

2 例如選擇square皮膚下的blue.css,復制 skin/square文件夾下的到css文件夾下

<link href="css/square/blue.css" rel="stylesheet">

3 引入icheck.js

移動端引入：

<script src="js/zepto.js"></script>

<script src="js/icheck.min.js"></script>

PC端引入

<script src="js/jquery.js"></script>

<script src="js/icheck.min.js"></script>

4 在頁面添加以下代碼

HTML：

<input type="checkbox">

<input type="checkbox" checked>

<input type="radio" name="iCheck">

<input type="radio" name="iCheck" checked>

javascript：

<script>

$(document).ready(function(){

 $('input').iCheck({

   checkboxClass: 'icheckbox_square-blue',  // 注意square和blue的對應關系

   radioClass: 'iradio_square-blue',

   increaseArea: '20%' // optional

 });

});

</script>

iCheck提供了大量回調事件，都可以用來監聽change事件。