详解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 相关文章推荐
jquery+CSS3实现3D拖拽相册效果
Jul 18 Javascript
简单分析javascript中的函数
Sep 10 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
angular2 ng build部署后base文件路径问题详细解答
Jul 15 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
EasyUI实现下拉框多选功能
Nov 07 Javascript
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
微信小程序发送短信验证码完整实例
Jan 07 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
Jan 18 Javascript
详解node.js 事件循环
Jul 22 Javascript
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
php文件操作之小型留言本实例
2015/06/20 PHP
yii2分页之实现跳转到具体某页的实例代码
2016/06/02 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
javawscript 三级菜单的实现原理
2009/07/01 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
判断ie的两种简单方法
2013/08/12 Javascript
动态显示可输入的字数提示还可以输入的字数
2014/04/01 Javascript
JavaScript每天定时更换皮肤样式的方法
2015/07/01 Javascript
IE7浏览器窗口大小改变事件执行多次bug及IE6/IE7/IE8下resize问题
2015/08/21 Javascript
Jquery鼠标放上去显示全名的实现方法
2017/02/06 Javascript
JS正则表达式判断有效数实例代码
2017/03/13 Javascript
angular 用拦截器统一处理http请求和响应的方法
2017/06/08 Javascript
详解Angular2学习笔记之Html属性绑定
2018/01/03 Javascript
Node.js中的child_process模块详解
2018/06/08 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
Vue循环遍历选项赋值到对应控件的实现方法
2020/06/22 Javascript
我所理解的JavaScript中的this指向
2020/09/04 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
[46:37]LGD vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python time模块详解(常用函数实例讲解,非常好)
2014/04/24 Python
Python中__call__用法实例
2014/08/29 Python
CentOS 7 安装python3.7.1的方法及注意事项
2018/11/01 Python
TensorFlow梯度求解tf.gradients实例
2020/02/04 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
在keras里实现自定义上采样层
2020/06/28 Python
python下载的库包存放路径
2020/07/27 Python
css3进行截取替代js的substring
2013/09/02 HTML / CSS
中专毕业生个人职业生涯规划
2014/02/19 职场文书
九一八事变纪念日演讲稿
2014/09/14 职场文书
民主评议党员工作总结
2014/10/20 职场文书
2016年父亲节寄语
2015/12/04 职场文书
幼儿园六一儿童节开幕词
2016/03/04 职场文书
导游词之永泰公主墓
2019/12/04 职场文书
Redis5之后版本的高可用集群搭建的实现
2021/04/27 Redis
bat批处理之字符串操作的实现
2022/03/16 Python