ickeck插件

地址：http://www.bootcss.com/p/icheck/#skins

使用

1. 先引入文件

css <link rel="stylesheet" type="text/css" href="../css/web2.0/skins/all.css">

js <script type="text/javascript" src="../js/web2.0/jquery.icheck.js"></script>

　　选择你要使用的皮肤样式主题，共6个(css文件不同)

2.html 结构

<ul class="icheck">
　　<li>
	<input tabindex="01" type="checkbox" name="" />
　　</li>
</ul>

3. js 调用

$('.icheck input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){
		}).iCheck({
			checkboxClass: 'icheckbox_square-green'  //class类名，控制选框样式
		});

总结：

　插件方法：

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

回调事件

使用案例：

var _allckbox = $(".all-ckbox").find(".icheck input")
        _sonckbox = $(".allck-con").find(".icheck input")
// 如果全选 选中 那么所有子集都选中
    _allckbox.on('ifChecked ifUnchecked', function(event) {
        if (event.type == 'ifChecked') { //判断是否选中
            _sonckbox.iCheck('check');
        } else {
            _sonckbox.iCheck('uncheck');
        }
    });
// 如果子集全都选中，那么全选 也选中状态
    _sonckbox.on('ifChecked ifUnchecked', function(event) {
        var  _sonckboxize = _sonckbox.size();
        var _sonckboxsize_ck = _sonckbox.filter(":checked").size();
        if (event.type == 'ifChecked') {
            if(_sonckboxsize_ck == _sonckboxize){
                _allckbox.prop('checked', 'checked');
            }
        } else {
            _allckbox.removeProp('checked');
        }
        _allckbox.iCheck('update');
    });

ickeck插件

推荐阅读