地址: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');
});