iCheck

概要

表单复选框、单选框控件美化插件，主要作用为：

渲染并美化当前页面的复选框或单选框
响应复选框或单选框的点击事件

页面引用

css部分

1 <!-- iCheck for checkboxs and radio inputs-->
2 <link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">

JS部分

1 <!--iCheck 1.0.1-->
2 <script src ="/static/assets/plugins/iCheck/icheck.min.js"></script>

激活iCheck

默认情况下iCheck是不生效的,需要使用JS代码激活,此过程中可以指定iCheck的皮肤,案例代码如下:

css部分：

<input type="checkbox" class="minimal" />

JS部分：

// 激活 iCheck
$('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({checkboxClass: 'icheckbox_minimal-blue',radioClass   : 'iradio_minimal-blue'
});

回调事件

iCheck 提供了大量回调事件，都可以用来监听 change 事件

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

使用 on() 方法绑定事件：

$('input').on('ifChecked', function(event){alert(event.type + ' callback');
});

方法

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

$('input').iCheck('check');：将输入框的状态设置为checked
$('input').iCheck('uncheck');：移除checked状态
$('input').iCheck('toggle');：
$('input').iCheck('disable');：将输入框的状态设置为disable
$('input').iCheck('enable');：移除disabled状态
$('input').iCheck('update');：
$('input').iCheck('destroy');：移除 iCheck 样式

案例代码

全选

_checkboxMaster = $(".checkbox-master");
_checkbox = $("tbody").find("[type='checkbox']").not("[disabled]");
_checkboxMaster.on("ifClicked", function (e) {// 当前状态已选中，点击后应取消选择if (e.target.checked) {_checkbox.iCheck("uncheck");}// 当前状态未选中，点击后应全选else {_checkbox.iCheck("check");}
});

判断是否选中

_checkbox.each(function () {// 判断是否选中var delFlag = $(this).is(":checked");if (delFlag) {_idArray.push($(this).attr("id"));}
});

JQuery的iCheck插件使用方法相关推荐

iCheck插件属性方法
回调函数 iCheck 提供了回调事件,都可以用来监听 change 事件事件名称使用时机 ifClicked 用户点击了自定义的输入框或与其相关联的label ifChanged 输入框的 ch ...
iCheck插件全选和获取value值的解决方法
在使用jQuery iCheck 插件的时候遇到了一个问题,就是当我们使用普通的js全选功能无效了. $("#checkall").click(function(){if(this ...
jquery订阅发布插件代码草稿，为jquery扩展jquery.publish，jquery.subscribe方法
jquery订阅发布插件代码草稿! jquery订阅发布插件代码草稿,为jquery扩展jquery.publish,jquery.subscribe方法 --- jquery订阅发布插件代码草稿 & ...
jquery.validate.js插件的使用方法
近期做项目.须要用到 jQuery.validate.js插件,于是记录一下工作中的一些经验,以便日后学习. [样例例如以下] 1.前台页面 <form id="form1" ...
jQuery Raty星级评分插件使用方法
转载自 jQuery Raty星级评分插件使用方法使用jQuery Raty,可以很方便的在页面上嵌入一个评分组件,如下所示: 使用方法很简单,首先从https://github.com ...
jquery封装插件的方法
扩展jQuery插件和方法的作用是非常强大的,它可以节省大量开发时间.这篇文章将概述jQuery插件开发的基本知识,最佳做法和常见的陷阱. 一.入门编写一个jQuery插件开始于给jQuery.fn ...
jQuery的DataTables插件的使用方法[转]
转自:http://www.guoxk.com/node/jquery-datatables 在做后台的时候并没有美工和前端工程师来配合你做页面,为了显示数据并有一定的美感,我们可以使用jQuery的 ...
Bootstrap的iCheck插件checkbox和radio
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phone等 ...
icheck插件的使用
前端碰到了需要给input标签下的radio和checkbox设置不同的选择图片.选择用了icheck插件,想达到如下效果 icheck使用方法: (1)代码中引入Jquery,icheck的CSS样 ...

JQuery的iCheck插件使用方法

iCheck

概要

页面引用

激活iCheck

回调事件

方法

案例代码

全选

判断是否选中

JQuery的iCheck插件使用方法相关推荐

最新文章

热门文章