jquery----icheck插件

給checkbox添加樣式

1、引入
文件iCheck自己下載；

<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">

<script src="/static/assets/plugins/iCheck/icheck.min.js"></script>

2、激活

var Ichick = function(){
    var handle = function() {
        $('input[type="checkbox"].flat-red, input[type="radio"].flat-red').iCheck({
            checkboxClass: 'icheckbox_flat-green',
            radioClass   : 'iradio_flat-green'
        })
    }
    return{
        init:function(){
            handle();
        }
    }
}();
$(document).ready(function () {
    Ichick.init();
})

　　

<input type="checkbox" class="flat-red">

　　

參考樣式：

 

全選

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

事件名稱	使用時機
ifClicked	用戶點擊了自定義的輸入框或與其相關聯的 label
ifChanged	輸入框的 checked 或 disabled 狀態改變了
ifChecked	輸入框的狀態變為 checked
ifUnchecked	checked 狀態被移除
ifDisabled	輸入框狀態變為 disabled
ifEnabled	disabled 狀態被移除
ifCreated	輸入框被應用了 iCheck 樣式
ifDestroyed	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樣式

 

使用示例：

使用 on() 方法綁定事件：

$(document).ready(function () {
    //Validate.init();
    //Ichick.init();
    console.log($('input[type="checkbox"].flat-red.icheck_master'))
    $('input[type="checkbox"].flat-red.icheck_master').on('ifChecked', function(event){
        $('input[type="checkbox"].flat-red').iCheck('check');
    })
    $('input[type="checkbox"].flat-red.icheck_master').on('ifUnchecked', function(event){
        $('input[type="checkbox"].flat-red').iCheck('uncheck');
    })
})

或者

_checkboxMaster = $(".checkbox-master");
_checkbox = $("tbody").find("[type='checkbox']").not("[disabled]");
_checkboxMaster.on("ifClicked", function (e) {
    // 當前狀態已選中，點擊后應取消選擇
    if (e.target.checked) {
        _checkbox.iCheck("uncheck");
    }

    // 當前狀態未選中，點擊后應全選
    else {
        _checkbox.iCheck("check");
    }
});

　　

判斷是否選中

_checkbox.each(function () {
    // 判斷是否選中
   var delFlag = $(this).is(":checked");
   if (delFlag) {
       _idArray.push($(this).attr("id"));
   }
});