iCheck使用

注意：使用iCheck时需要自己引用相关的皮肤，官方提供了几套皮肤，每一套还有不同的颜色，使用之前一定要引入相关css，不然会出现checkbox无法显示的窘境。

初始化iCheck

具体的请参考官方文档。

引入样式CSS和JavaScript

1
2
3

<script src="your-path/jquery.js"></script>
<link href="your-path/minimal/red.css" rel="stylesheet">
<script src="your-path/icheck.js"></script>

添加HTML

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

初始化iCheck

<!-- 例子1： 指定皮肤样式 -->
<script>
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal', // 指定的皮肤样式
        radioClass: 'iradio_minimal',
        increaseArea: '20%' // optional
      });
    });
</script>

<!-- 例子2： 指定皮肤样式和颜色 -->
<script>
    $(document).ready(function(){
      $('input').iCheck({
        checkboxClass: 'icheckbox_minimal-red',
        radioClass: 'iradio_minimal-red',
        increaseArea: '20%' // optional
      });
    });
</script>

<!-- 例子3： html上指定皮肤 -->
<input type="checkbox" checked class="minimal">

全选功能实现

实现一个全选功能。

<div class="row">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <label>
            <input type="checkbox" class="js-all">checkbox2
        </label>
    </div>
</div> 

<div class="row" data-role="checkbox">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <label>
            <input type="checkbox">checkbox1
        </label>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <label>
            <input type="checkbox">checkbox2
        </label>
    </div>
</div>

$(function () {
    var checkAll = $('input.js-all');
    var checkboxes = $('input[type="checkbox"]', '[data-role="checkbox"]');

    $('input').iCheck();
	// 全部选中或者不选.
    checkAll.on('ifChecked ifUnchecked', function(event) {        
        if (event.type == 'ifChecked') {
            checkboxes.iCheck('check');
        } else {
            checkboxes.iCheck('uncheck');
        }
    });
	// 改变全选checkbox状态.
    checkboxes.on('ifChanged', function(event){
        if(checkboxes.filter(':checked').length == checkboxes.length) {
            checkAll.prop('checked', true);
        } else {
            checkAll.prop('checked', false);
        }
        checkAll.iCheck('update');
    });
});

动态添加checkbox事件代理

动态添加checkbox事件不生效问题，应该使用事件代理。

<div class="row" data-role="checkbox">
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <label>
            <input type="checkbox">checkbox1
        </label>
    </div>
    <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
        <label>
            <input type="checkbox">checkbox2
        </label>
    </div>
    <!-- 这里动态添加checkbox 时, js需要修改为事件代理模式 -->
</div>

// 如果所有<div class="row" data-role="checkbox">
// 内所有的checkbox都选中，或者不全选需要动态的改变“全选”checkbox状态
// 因为有动态加入的checkbox，所以这里需要修改成代理事件
var $checkboxContainer = $('.row[data-role="checkbox"]');
$checkboxContainer.on('ifChanged', function(event){
    // checkboxes需要动态获取
    var checkboxes = $('input[type="checkbox"]', $checkboxContainer);
    if(checkboxes.filter(':checked').length == checkboxes.length) {
        checkAll.prop('checked', true);
    } else {
        checkAll.prop('checked', false);
    }
    checkAll.iCheck('update');
});

获取checked状态的checkbox

iCheckbox是没有提供获取checked状态的方法，所以你要使用jQuery提供的prop方法。

var checkboxes = $('input[type="checkbox"]', $checkboxContainer);

// 获取选中的checkbox
var allChecked = checkboxes.filter(':checked');
// 获取checked状态
$.each(checkboxes, function (checkbox, i) {
    console.log($(this).prop('checked')); // true | false
});