详解Bootstrap的iCheck插件checkbox和radio


Posted in Javascript onAugust 24, 2016

iCheck

特色:

1、在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备

2、支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统

4、方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)

5、体积小巧 — gzip压缩后只有1 kb

6、25 种参数 用来定制复选框(checkbox)和单选按钮(radio button)

7、8 个回调事件 用来监听输入框的状态

8、7个方法 用来通过编程方式控制输入框的状态

9、能够将输入框的状态变化同步回原始输入框中, 支持所有选择器

详解Bootstrap的iCheck插件checkbox和radio

使用方法:

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

调用iCheck时,只需要将修改了默认值的参数列出来即可:

//基础使用方法 
$('input').iCheck({ 
labelHover : false, 
cursor : true, 
checkboxClass : 'icheckbox_square-blue', 
radioClass : 'iradio_square-blue', 
increaseArea : '20%' 
});

下面是参数列表及其默认值:

{ 
handle: '', 
checkboxClass: 'icheckbox', 
radioClass: 'iradio', 
checkedClass: 'checked', 
checkedCheckboxClass: '', 
checkedRadioClass: '', 
uncheckedClass: '', 
uncheckedCheckboxClass: '', 
uncheckedRadioClass: '', 
disabledClass: 'disabled', 
disabledCheckboxClass: '', 
disabledRadioClass: '', 
enabledClass: '', 
enabledCheckboxClass: '', 
enabledRadioClass: '', 
hoverClass: 'hover', 
focusClass: 'focus', 
activeClass: 'active', 
labelHover: true, 
labelHoverClass: 'hover', 
increaseArea: '', 
cursor: false, 
inheritClass: false, 
inheritID: false, 
insert: '' 
}

我们可以对上面列出的任何class重置样式

皮肤

Black — minimal.css //黑色
Red — red.css //红色
Green — green.css //绿色
Blue — blue.css //蓝色
Aero — aero.css //win7中的那种玻璃效果
Grey — grey.css //银灰色
Orange — orange.css //橙色
Yellow — yellow.css //黄色
Pink — pink.css //粉红色
Purple — purple.css //紫色

(请自行下载这些皮肤包)

初始化

首先,引入jQuery库文件

其次,引入jquery.icheck.js插件文件

(如果要引入相关皮肤,则需引入:相关主题颜色.css文件)

回调事件

iCheck支持所有选择器(selectors),并且只针对复选框checkbox和单选radio按钮起作用

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

详解Bootstrap的iCheck插件checkbox和radio

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

$('input').on('ifChecked', function(event){ //ifCreated 事件应该在插件初始化之前绑定 
 alert(event.type + ' callback'); 
}); 
bootstrap iCheck中的radio和checkbox的大小可以调整吗?
.icheckbox_square-blue, .iradio_square-blue { 
 display: block; 
 margin: 0; 
 padding: 0; 
 width: 22px; 
 height: 22px; 
 background: url(blue.png) no-repeat; 
 border: none; 
 cursor: pointer; 
}

如果要调整icheck的radio或checkbox样式,通过上面的css修改width和height,同时修改blue.png图片对应的尺寸。

下面看下bootstrap icheck 如何获取radio的value值

针对下面一组radio,在使用icheck的时候怎么才能获取到value值 1或 0呢?

详解Bootstrap的iCheck插件checkbox和radio

以上所述是小编给大家介绍的Bootstrap的iCheck插件checkbox和radio,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
分享一个asp.net pager分页控件
Jan 04 Javascript
jQuery布局插件UI Layout简介及使用方法
Apr 03 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
jQuery  ready方法实现原理详解
Oct 19 Javascript
jQuery Jsonp跨域模拟搜索引擎
Jun 17 jQuery
Vue写一个简单的倒计时按钮功能
Apr 20 Javascript
JavaScript实现浅拷贝与深拷贝的方法分析
Jul 05 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
JS实现可视化文件上传
Sep 08 Javascript
vue 项目地址去掉 #的方法
Oct 20 Javascript
Element 默认勾选表格 toggleRowSelection的实现
Sep 04 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
JS简单实现无缝滚动效果实例
Aug 24 #Javascript
JS动态加载脚本并执行回调操作
Aug 24 #Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 #Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 #Javascript
BootStrap iCheck插件全选与获取value值的解决方法
Aug 24 #Javascript
js友好的时间返回函数
Aug 24 #Javascript
JS转换HTML转义符的方法
Aug 24 #Javascript
You might like
VOLVO车载收音机
2021/03/02 无线电
PHP字符转义相关函数小结(php下的转义字符串)
2007/04/12 PHP
PHP 设置MySQL连接字符集的方法
2011/01/02 PHP
php中判断字符串是否全是中文或含有中文的实现代码
2011/09/16 PHP
php实现下载限制速度示例分享
2014/02/13 PHP
php源码的使用方法讲解
2019/09/26 PHP
JAVASCRIPT  THIS详解 面向对象
2009/03/25 Javascript
php与js的区别是什么
2013/08/05 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
2016/05/24 Javascript
javascript事件处理模型实例说明
2016/05/31 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
React+react-dropzone+node.js实现图片上传的示例代码
2017/08/23 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
微信小程序之自定义组件的实现代码(附源码)
2018/08/02 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
移动端图片上传旋转、压缩问题的方法
2018/10/16 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
JavaScript文档加载模式以及元素获取
2020/07/28 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
利用Python+Java调用Shell脚本时的死锁陷阱详解
2018/01/24 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
对Python 多线程统计所有csv文件的行数方法详解
2019/02/12 Python
Python虚拟环境的原理及使用详解
2019/07/02 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
电子商务网站的创业计划书
2014/01/05 职场文书
安全生产责任书
2014/03/12 职场文书
竞选班长的演讲稿
2014/04/24 职场文书
副科竞争上岗演讲稿
2014/05/12 职场文书
英语复习计划
2015/01/19 职场文书
个人德育工作总结
2015/03/05 职场文书
详细聊聊MySQL中慢SQL优化的方向
2021/08/30 MySQL