jquery 选择框icheck 插件的使用

icheck使用方法icheck的回调事件icheck的方法参考博客官网

icheck使用方法

1、选择你要使用的皮肤样式主题，共6个

flat, futurico, line, minimal, polaris, square

每个皮肤底下有好几个可以选择的颜色，例如：

Black — square.css

Red — red.css

Green — green.css

Blue — blue.css

Aero — aero.css

Grey — grey.css

Orange — orange.css

Yellow — yellow.css

Pink — pink.css

Purple — purple.css 2 、例如选择square皮肤下的blue.css,复制 skin/square文件夹下的到css文件夹下

<link href="css/square/blue.css" rel="stylesheet">

3 、引入icheck.js 首先引入jQuery v1.7+ (或 Zepto)，然后再引入icheck插件 移动端引入：

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

PC端引入

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

4、 在页面添加以下代码 html

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

js

$(document).ready(function(){ //渲染样式 $('input').iCheck({ checkboxClass: 'icheckbox_square-blue', // 注意square和blue的对应关系 radioClass: 'iradio_square-blue', increaseArea: '20%' // optional }); // 使用on()方法绑定事件： $('input').on('ifChecked', function(event){ console.log(event.type); }); $('input').on('ifCreated ifClicked ifChanged ifChecked ifUnchecked ifDisabled ifEnabled ifDestroyed', function(event){ console.log(event.type); }); });

icheck的回调事件

事件名称使用时机ifClicked用户点击了自定义的输入框或与其相关联的labelifChanged输入框的 checked 或 disabled 状态改变了ifChecked输入框的状态变为 checkedifUncheckedchecked 状态被移除ifDisabled输入框状态变为 disabledifEnableddisabled 状态被移除ifCreated输入框被应用了iCheck样式ifDestroyediCheck样式被移除

icheck的方法

下面这些方法可以用来通过编程方式改变输入框状态（可以使用任何选择器）：

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

参考博客

JQery icheck 插件

官网

iCheck