1、使用:

<link rel="stylesheet" href="css/skins/all.css">或者<link rel="stylesheet" href="css/skins/flat/需要的颜色文件">

<script src="js/jquery.js"></script>

<script src="js/icheck.js"></script>

2、初始化:

$('input').iCheck({
  checkboxClass: 'icheckbox_flat-blue', //每个风格都对应一个,这个不能写错哈。
  radioClass: 'icheckbox_flat-blue',
});

3、选中不选中处理:

$('input').on('ifChecked', function(event){ })

$('input').on('ifUnchecked', function(event){ })

4、主动选中与不选中

$('input').iCheck('check'); — 将输入框的状态设置为checked

$('input').iCheck('uncheck'); — 移除 checked 状态

5、获取选中的input:

1)
$('input').on('ifChecked', function(event){   
    $(event.target)
});
event对象:
 
2)$(".icheckbox_flat-blue.checked").find("input")

6、获取当前选中的input的索引:

例子:

<div class="row margin">

  <div class="item2">
    <input type="checkbox" name="ytName1" value="1"/><label class="margin">星期一</label>
  </div>
  <div class="item2">
    <input type="checkbox" name="ytName1" value="2"/><label class="margin">星期二</label>
  </div>
  <div class="item2">
    <input type="checkbox" name="ytName1" value="3"/><label class="margin">星期三</label>
  </div>
</div>

$('input').on('ifChecked', function(event){

    $(event.target).parents(".item2").index()

});

7、获取当前选中的input的val值:(基于4,5)
$('input').on('ifChecked', function(event){  
    $(event.target).val()
});

其他参考API:http://www.bootcss.com/p/icheck/#skins

icheck使用的更多相关文章

  1. iCheck.js

    一.iCheck:http://www.bootcss.com/p/icheck/ 1.选择一个颜色主题,网上有,有了一个肤色主题,然后就是把这个肤色主题的css文件复制到iCheck文件夹里面 2. ...

  2. BootStrapt iCheck表单美化插件使用方法详解(含参数、事件等) 全选 反选

    特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备 2.支持触摸设备 — iOS.Android.BlackBerry.Windows Phone等系统 4.方便 ...

  3. iCheck表单美化插件使用方法详解(含参数、事件等)

    iCheck   特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括 桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phon ...

  4. JQery icheck 插件

    <script type="text/javascript"> $(document).ready(function(){ var callbacks_list = $ ...

  5. 优化checkbox和radio,类似Bootstrap中的iCheck

    checkbox和radio浏览器默认的已经满足不了大众的审美需求,更不用说浏览器之间的差异化,取而代之,优化checkbox和radio的方法也随之诞生了. html结构:单选框为例,简单说明: 其 ...

  6. icheck.min.js 选中效果

    遍历所有 checkbox 如果是选中的用 绿色 如果未选中用 灰色 //check控件属性 $('input').each(function() { var self = $(this); var ...

  7. icheck样式绑定与翻页保持

    官方文档:http://icheck.fronteed.com/ 使用基本样式 $('input').iCheck({ checkboxClass : 'icheckbox_square-blue', ...

  8. icheck如何修改样式大小

    icheck默认样式比较大,有需求调整checkbox大小. 1. 最简单的方法可用css3来实现,让整个模块层缩放,不兼容低版本浏览器. transform:scale(0.7,0.7)   2. ...

  9. jquery-插件iCheck 使用

    这是一个兼容多种浏览器的插件 官网:http://icheck.fronteed.com/ 官方给出了很多的例子,我说一个使用的问题. 使用的时候,要放到window..load的外部. 页面html ...

  10. 期货大赛项目|六,iCheck漂亮的复选框

    废话不多说,直接上图 对,还是上篇文章的图,这次我们不研究datatables,而是看这个复选框,比平常的复选框漂亮太多 看看我是如何实现的吧 插件叫iCheck 用法也简单 引入js和css $(& ...

随机推荐

  1. 联赛前集训日记Day3

    考试 竟然出了道莫比乌斯函数的应用?? 简直没法玩 刷题 莫比乌斯函数摆在面前,咋能很快改完啊 生活 GGGGGGGGGGG 自己浪过头了,开回家一周 这车翻得猝不及防,然而自己作的,自己受,只是给别 ...

  2. springCloud学习-服务消费者(Feign)

    1.简介 Feign是一个声明式的伪Http客户端,它使得写Http客户端变得更简单.使用Feign,只需要创建一个接口并注解.它具有可插拔的注解特性,可使用Feign 注解和JAX-RS注解.Fei ...

  3. CentOS 6.5下mysql的安装与配置

    一.通过yum自动安装mysql yum install mysql-server my-client 二.初始化及相关配置 安装完mysql数据库以后,会发现会多出一个mysqld的服务,通过输入  ...

  4. array_change_key_case()

    定义和用法 array_change_key_case() 函数将指定数组的所有的键进行大小写转换. 如果数组的键(索引)为数字则不发生变化.如果未提供第二个参数,则默认转换为小写. 语法 array ...

  5. HDU 2563 统计问题(递推)

    题目链接:http://acm.hdu.edu.cn/showproblem.php? pid=2563 将向上移的步数设为a[n],将向左右移的步数设为b[n],有a[n]=a[n-1]+b[n-1 ...

  6. Geeks - Detect Cycle in a Directed Graph 推断图是否有环

    Detect Cycle in a Directed Graph 推断一个图是否有环,有环图例如以下: 这里唯一注意的就是,这是个有向图, 边组成一个环,不一定成环,由于方向能够不一致. 这里就是添加 ...

  7. Swift基本常识点

    import Foundation // 单行注释 // 多行注释(支持嵌套,OC是不支持的) // 常量let,初始化之后就不可改变. // 常量的具体类型可以自动识别,等号后面是什么类型,它就是什 ...

  8. CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)

    网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道.构成显式网格. 当网格项目定位在这些界限之外.网格容器通过添加隐式网格线生成隐式网格轨道. 这些隐 ...

  9. 转:java身份证格式强校验

    package com.dsh.zealandweb.utils; import java.util.HashSet; import java.util.regex.Pattern; import o ...

  10. C++ Development Library

    C/C++ 开发库 | C/C++ Development Library 这里收集一些著名的 C/C++ 开发库.SDK.类库.可复用类与结构代码 等信息,列举它们的介绍.参考和网站链接,为各位 C ...