jQuery iCheck

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

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

页面引用

CSS 部分

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

JS 部分

<!-- iCheck 1.0.1 -->
<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');：将输入框的状态设置为 disabled
$('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"));}
});

作者：撸帝
链接：https://www.jianshu.com/p/b8cc6a9db32e
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

jQuery iCheck相关推荐

jQuery iCheck Plugin 下处理单选按钮值切换
先来看段html代码,如下: <li style="width:560px;"><i class="imc"></i>< ...
jquery iCheck 插件
1 官网:http://www.bootcss.com/p/icheck/#download 2 博客:https://www.cnblogs.com/xcsn/p/6307610.html http ...
【常用 JS 插件】jQuery iCheck 复选/单选美化插件
iCheck 表单复选框.单选框控件美化插件,主要作用为: 渲染并美化当前页面的复选框或单选框响应复选框或单选框的点击事件页面引用 CSS 部分 <!-- iCheck for checkb ...
Bootstrap的iCheck插件checkbox和radio
iCheck 特色: 1.在不同浏览器(包括ie6+)和设备上都有相同的表现 - 包括桌面和移动设备 2.支持触摸设备 - iOS.Android.BlackBerry.Windows Phone等 ...
iCheck的使用示例
一般要引入四个文件: 1 你选择的样式(在这里我是用的是扁平化blue.css样式,当然你也可以自己写样式) 2 引入了人家的样式,当然要引入人家的图片blue.png(这里由于需求,我ps修改了一下 ...
HTML、CSS、JS、jQuery
前端技巧 HTML form表单 input的type常用类型图片分区响应视频播放 CSS 样式选择器 background背景图 text文本样式 transition过渡 animation动 ...
关于icheck的使用
最近开始用icheck这个插件,说实话,才开始确实走了不少弯路,网上的教程也不少可是还是发现了很多的问题. 首先使用icheck的第一步就是引入它的icheck.js和jQuery,在这里我要特别强调 ...
bootstrap的icheck插件使用
由于我们在项目开发时会经常用到单选框和复选框,并且众所周知其样式不易修改,它们的原有样式不能满足我们项目美观所需,所以这个时候icheck插件就能帮到我们不少呢,下来我就来说说icheck插件的使用: ...
JavaWeb常用工具/插件合集——validation和iCheck
文章目录 1. jQuery Validation表单验证框架引入js Demo 默认校验规则自定义校验规则 2. jQuery iCheck复选框插件 iCheck简介页面引用使用方法代码 ...