ICheck表单复选框、单选框控件美化插件

作用：

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

特点：

在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括桌面和移动设备
支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统
方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)
体积小巧 — gzip压缩后只有1 kb
25 种参数用来定制复选框（checkbox）和单选按钮（radio button）
8 个回调事件用来监听输入框的状态
7个方法用来通过编程方式控制输入框的状态
能够将输入框的状态变化同步回原始输入框中，支持所有选择器

使用方式：

引入css文件：<link rel="stylesheet" href="/static/assets/plugins/iCheck/all.css">
引入js文件：<script src="/static/assets/plugins/iCheck/icheck.min.js"></script>
编写html文件：<input type="checkbox" class="minimal" />
激活iCheck插件（即初始化iCheck样式效果等）:

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

用法：

基础用法：

$('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: ''
}

常用方法：

$('input').iCheck('check');：将输入框的状态设置为 checked
$('input').iCheck('uncheck');：移除 checked 状态
$('input').iCheck('disable');：将输入框的状态设置为 disabled
$('input').iCheck('enable');：移除 disabled 状态
$('input').iCheck('destroy');：移除 iCheck 样式
$('input').iCheck('toggle');：若输入框状态为checked,则移除checked状态，若非checked状态则设置为checked状态（即切换选中状态）
$('input').iCheck('update');：响应在插件外部的输入框的输入更改
注：可以使用任何选择器

常用事件：

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

事件绑定示例：

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

完整示例：

实现全选效果：

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

若要跳整iCheck中的radio和checkbox的大小，可进行对以下css中的类名修改：

.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表单复选框、单选框控件美化插件相关推荐

php中得到复选框的数据的代码,表单复选框向PHP传输数据的代码
表单复选框向PHP传输数据的代码表单复选框就是checkbox 1.checkbox的应用复制代码代码如下: 2.由于我传输的是在php循环中产生的数组,因此value也要设成变量: for($ ...
html构建复选框标签,什么标签用于在表单中构建复选框_HTML表单复选框INPUT标签...
HTML表单复选框标签在HTML的表单控件中,复选框也是经常使用的控件,它可以让用户选择打勾或不打勾.它使用的也是标签. 一.定义标签用于表示文本框.密码框.单选框.复选框.文件上传框.普通按钮. ...
Layui表单复选框验证
Layui表单复选框验证近日由于项目原因使用layui框架进行开发,在做表单验证的时候苦于复选框验证问题找不到答案,于是作为小白的我换了一种思路,不采用官方提供的form-verify,而是采用在提 ...
JS对象迭代、事件处理器、表单控件绑定、表单复选框、表单单选按钮
JS对象迭代知识点 v-for v-for 循环JS对象,把对象内容循环显示到页面上. <div id="myApp"><h1>JS对象迭代</h1 ...
css复选框表单,用CSS来美化表单——复选按钮篇
原标题:用CSS来美化表单--复选按钮篇今天,我们来学习如何利用CSS美化checkbox复选框按钮,过程非常简单,本文主要是提供美化复选框按钮的方法,至于美化到何种程度还需大家自己去举一反三,发挥 ...
php表单复选传值,jQuery+SpringMVC中的复选框选择与传值实例_jquery
下面我就为大家分享一篇jQuery+SpringMVC中的复选框选择与传值实例,具有很好的参考价值,希望对大家有所帮助. 一.checkbox选择在jQuery中,选中checkbox通用的两种方式 ...
表单复选框提交到mysql_使用表单复选框设置Access数据库表字段
这样做的一种方法是在Access中使用VBA.在Access中访问VBA控制台的方式是,在表单的设计视图中,右键单击复选框控件并选择" Build Event"从菜单中.确保您的控 ...
html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
html表单复选框隐藏,ElementUI 表格部分复选框禁用或隐藏
背景我们在使用 element ui 的 Table 组件构建带复选框的表格时,我们希望根据条件禁用或者隐藏某行选择框.如下图所示: 解析通过查看 ElementUI 官方文档 selectabl ...

ICheck表单复选框、单选框控件美化插件

作用：

特点：

使用方式：

用法：

常用方法：

常用事件：

ICheck表单复选框、单选框控件美化插件相关推荐

最新文章

热门文章