地址: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插件的更多相关文章

  1. Angular杂谈系列1-如何在Angular2中使用jQuery及其插件

    jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...

  2. Jenkins 安装的HTML Publisher Plugin 插件无法展示ant生成的JunitReport报告

    最近在做基于jenkins ant  junit 的测试持续集成,单独ant junit生成的junitreport报告打开正常,使用Jenkins的HTML Publisher Plugin 插件无 ...

  3. 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)

    前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...

  4. solr服务中集成IKAnalyzer中文分词器、集成dataimportHandler插件

    昨天已经在Tomcat容器中成功的部署了solr全文检索引擎系统的服务:今天来分享一下solr服务在海量数据的网站中是如何实现数据的检索. 在solr服务中集成IKAnalyzer中文分词器的步骤: ...

  5. 使用Visual Studio SDK制作GLSL词法着色插件

    使用Visual Studio SDK制作GLSL词法着色插件 我们在Visual Studio上开发OpenGL ES项目时,避免不了写Shader.这时在vs里直接编辑shader就会显得很方便. ...

  6. 工欲善其事,必先利其器 之 VS2013全攻略(安装,技巧,快捷键,插件)!

    如有需要WPF工具的朋友可以移步 工欲善其事,必先利其器 之 WPF篇: 随着开发轨迹来看高效WPF开发的工具和技巧 之前一篇<c++的性能, c#的产能?!鱼和熊掌可以兼得,.NET NATI ...

  7. Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件

    Jquery Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.以及各种滑动插件 可以让用户 ...

  8. 10个最好用的HTML/CSS 工具、插件和资料库

    大家在使用HTML/CSS开发项目的过程中,有使用过哪些工具,插件和库?下面介绍的10种HTML/CSS工具,插件和资料库,是国外程序员经常用到的. Firebug Lite FirebugLite ...

  9. 在Sublime Text 3上安装代码格式化插件CodeFormatter

    1.了解CodeFormatter插件 在Sublime Text 3中编写代码,为了能让我们的代码格式变得漂亮整洁,需要一个能自动格式代码的插件.这里发现CodeFormatter插件不错,它能支持 ...

随机推荐

  1. 【CF696B】Puzzles(树形DP,期望)

    题意:n 个节点的树,初始位置为 1 号节点,初始时间为 1.每次随机地走向任何一个没有走过的子树并且令时间 +1求问走到每一个点时的时间的期望值 思路:比较少见的一道自顶向下的树形DP dp[i]表 ...

  2. Sum BZOJ 3944

    Sum [问题描述] 给定一个正整数 N ( N <= 231 - 1 ) 求: [输入格式] 一共T+1行 第1行为数据组数T(T<=10) 第2~T+1行每行一个非负整数N,代表一组询 ...

  3. Why do I keep getting mixed tabs and spaces in a Visual Studio C# code window?[vs power tools issue transfered]

    goto tools->option->power tools-> turn "use mixed tabs" option to off. you won`t ...

  4. 标准C程序设计七---45

    Linux应用             编程深入            语言编程 标准C程序设计七---经典C11程序设计    以下内容为阅读:    <标准C程序设计>(第7版) 作者 ...

  5. 打印倒序NxN乘法表

    一.实验要求: 给定任意一个字符N(N>0),然后打印NxN的倒序乘法表. 二.解决问题: #/!bin/bash# #define functionNxN_fun(){ local i=$1 ...

  6. 【leetcode】Find All Anagrams in a String

    [leetcode]438. Find All Anagrams in a String Given a string s and a non-empty string p, find all the ...

  7. 精读《Function Component 入门》

    1. 引言 如果你在使用 React 16,可以尝试 Function Component 风格,享受更大的灵活性.但在尝试之前,最好先阅读本文,对 Function Component 的思维模式有 ...

  8. const T、const T*、T *const、const T&、const T*& 的区别

    原文地址: http://blog.csdn.net/luoweifu/article/details/45600415 这里的T指的是一种数据类型,可以是int.long.doule等基本数据类型, ...

  9. 邁向IT專家成功之路的三十則鐵律 鐵律二十六:IT人閱讀之道-慎選

    IT人經常一整天工作回來早已用腦過度,此時收看什麼樣的電視節目,以及閱讀甚麼樣的書籍.聽什麼樣的音樂與有聲書最適合我們,讓我們可以在放鬆之餘,還能夠讓自己內在的心靈與外在的能力繼續成長呢? 身為IT工 ...

  10. Flash中如何使用滤镜

    使用滤镜 应用或删除滤镜 复制和粘贴滤镜 为对象应用预设滤镜 启用或禁用应用于对象的滤镜 启用或禁用应用于对象的所有滤镜 创建预设滤镜库 对象每添加一个新的滤镜,在属性检查器中,就会将其添加到该对象所 ...