# [iCheck plugin](http://damirfoy.com/iCheck/) ![v0.9.1](http://damirfoy.com/iCheck/0.9.1.png)
#### Highly customizable checkboxes and radio buttons for jQuery and Zepto.
Refer to the [iCheck website](http://damirfoy.com/iCheck/) for examples.
![Skins](http://damirfoy.com/iCheck/examples.png)
Features
--------
* **Identical inputs across different browsers and devices** — both [desktop and mobile](#browser-support)
* **Touch devices support** — iOS, Android, BlackBerry, Windows Phone
* **Keyboard accessible inputs** — `Tab`, `Spacebar`, `Arrow up/down` and other shortcuts
* **Customization freedom** — use any HTML and CSS to style inputs (try [6 Retina-ready skins](http://damirfoy.com/iCheck/))
* **jQuery and Zepto** JavaScript libraries support
* **Lightweight size** — 1 kb gzipped
-----
* [31 options](#options) to customize checkboxes and radio buttons
* [11 callbacks](#callbacks) to handle changes
* [9 methods](#methods) to make changes programmatically
* Saves changes to original inputs, [works carefully](#initialize) with any selectors
How it works
------------
iCheck works with checkboxes and radio buttons like a constructor. **It wraps each input with a div**, which may be customized by you or using one of the [available skins](http://damirfoy.com/iCheck/). You may also place inside that div some HTML code or text using `insert` option.
For this HTML:
```html
<label>
<input type="checkbox" name="quux[1]" disabled>
Foo
</label>
<label for="baz[1]">Bar</label>
<input type="radio" name="quux[2]" id="baz[1]" checked>
<label for="baz[2]">Bar</label>
<input type="radio" name="quux[2]" id="baz[2]">
```
With default options you'll get nearly this:
```html
<label>
<div class="icheckbox disabled">
<input type="checkbox" name="quux[1]" disabled>
</div>
Foo
</label>
<label for="baz[1]">Bar</label>
<div class="iradio checked">
<input type="radio" name="quux[2]" id="baz[1]" checked>
</div>
<label for="baz[2]">Bar</label>
<div class="iradio">
<input type="radio" name="quux[2]" id="baz[2]">
</div>
```
**By default, iCheck doesn't provide any CSS styles for wrapper divs** (if you don't use [skins](http://damirfoy.com/iCheck/)).
Options
-------
These options are default:
```js
{
// 'checkbox' or 'radio' to style only checkboxes or radio buttons, both by default
handle: '',
// base class added to customized checkboxes
checkboxClass: 'icheckbox',
// base class added to customized radio buttons
radioClass: 'iradio',
// class added on checked state (input.checked = true)
checkedClass: 'checked',
// if not empty, used instead of 'checkedClass' option (input type specific)
checkedCheckboxClass: '',
checkedRadioClass: '',
// if not empty, added as class name on unchecked state (input.checked = false)
uncheckedClass: '',
// if not empty, used instead of 'uncheckedClass' option (input type specific)
uncheckedCheckboxClass: '',
uncheckedRadioClass: '',
// class added on disabled state (input.disabled = true)
disabledClass: 'disabled',
// if not empty, used instead of 'disabledClass' option (input type specific)
disabledCheckboxClass: '',
disabledRadioClass: '',
// if not empty, added as class name on enabled state (input.disabled = false)
enabledClass: '',
// if not empty, used instead of 'enabledClass' option (input type specific)
enabledCheckboxClass: '',
enabledRadioClass: '',
// class added on indeterminate state (input.indeterminate = true)
indeterminateClass: 'indeterminate',
// if not empty, used instead of 'indeterminateClass' option (input type specific)
indeterminateCheckboxClass: '',
indeterminateRadioClass: '',
// if not empty, added as class name on determinate state (input.indeterminate = false)
determinateClass: '',
// if not empty, used instead of 'determinateClass' option (input type specific)
determinateCheckboxClass: '',
determinateRadioClass: '',
// class added on hover state (pointer is moved onto input)
hoverClass: 'hover',
// class added on focus state (input has gained focus)
focusClass: 'focus',
// class added on active state (mouse button is pressed on input)
activeClass: 'active',
// adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
labelHover: true,
// class added to label if labelHover set to true
labelHoverClass: 'hover',
// increase clickable area by given % (negative number to decrease)
increaseArea: '',
// true to set 'pointer' CSS cursor over enabled inputs and 'default' over disabled
cursor: false,
// set true to inherit original input's class name
inheritClass: false,
// if set to true, input's id is prefixed with 'iCheck-' and attached
inheritID: false,
// add HTML code or text inside customized input
insert: ''
}
```
There's no need to copy and paste all of them, you can just mention the ones you need:
```js
$('input').iCheck({
labelHover: false,
cursor: true
});
```
You can choose any class names and style them as you want.
Initialize
----------
Just include `jquery.icheck.js` (or `zepto.icheck.js`) after [jQuery v1.7+](http://jquery.com) (or [Zepto](http://github.com/madrobby/zepto#zepto-modules) [polyfill, event, data]).
iCheck supports any selectors, but handles only checkboxes and radio buttons:
```js
// customize all inputs (will search for checkboxes and radio buttons)
$('input').iCheck();
// handle inputs only inside $('.block')
$('.block input').iCheck();
// handle only checkboxes inside $('.test')
$('.test input').iCheck({
handle: 'checkbox'
});
// handle .vote class elements (will search inside the element, if it's not an input)
$('.vote').iCheck();
// you can also change options after inputs are customized
$('input.some').iCheck({
// different options
});
```
Indeterminate
---------
HTML5 allows specifying [indeterminate](http://css-tricks.com/indeterminate-checkboxes/) ("partially" checked) state for checkboxes. iCheck supports this for both checkboxes and radio buttons.
You can make an input indeterminate through HTML using additional attributes (supported by iCheck). Both do the same job, but `indeterminate="true"` may not work in some browsers (like IE7):
```html
indeterminate="true"
<input type="checkbox" indeterminate="true">
<input type="radio" indeterminate="true">
determinate="false"
<input type="checkbox" determinate="false">
<input type="radio" determinate="false">
```
`indeterminate` and `determinate` [methods](#methods) can be used to toggle indeterminate state.
Callbacks
---------
iCheck provides plenty callbacks, which may be used to handle changes.
<table>
<thead>
<tr>
<th>Callback name</th>
<th>When used</th>
</tr>
</thead>
<tbody>
<tr>
<td>ifClicked</td>
<td>user clicked on a customized input or an assigned label</td>
</tr>
<tr>
<td>ifChanged</td>
<td>input's "checked", "disabled" or "indeterminate" state is changed</td>
</tr>
<tr>
<td>ifChecked</td>
<td>input's state is changed to "checked"</td>
</tr>
<tr>
<td>ifUnchecked</td>
<td>"checked" state is removed</td>
</tr>
<tr>
<td>ifToggled</td>
<td>input's "checked" state is changed</td>
</tr>
<tr>
<td>ifDisabled</td>
<td>input's state is changed to "disabled"</td>
</tr>
<tr>
<td>ifEnabled</td>
<td>"disabled" state is removed</td>
</tr>
<tr>
<td>ifIndeterminate</td>
<td>input's state is changed to "indeterminate"</td>
</tr>
<tr>
<td>ifDeterminate</td>
<td>"indeterminate" state is removed</td>
</tr>
<tr>
<td>ifCreated</td>
<td>input is just customized</td>
</tr>
<tr>
<td>ifDestroyed</td>
<td>customization is just removed</td>
</tr>
</tbody>
</table>
Use `on()` method to bind them to inputs:
```js
$('input').on('ifCh
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
适合学习/练手、毕业设计、课程设计、期末/期中/大作业、工程实训、相关项目/竞赛学习等。 项目具有较高的学习借鉴价值,也可直接拿来修改复现。可以在这些基础上学习借鉴进行修改和扩展,实现其它功能。 【无积分此资源可私信博主有偿获取】 可放心下载学习借鉴,你会有所收获。 —— 对于学习和实践,选择合适的项目和资源确实是一种有效的方式。 在进行毕业设计、课程设计或大作业时,选择具备学习借鉴价值的项目可以帮助你理解和应用所学知识,同时也可以通过修改和扩展来实现其他功能。 通过参与实际项目,你可以应用所学的理论知识,深入了解软件开发或其他领域的实践流程和技术要求。 可放心下载学习借鉴,你会有所收获。 【无积分此资源可私信博主有偿获取】 # 注意 1. 本资源仅用于开源学习和技术交流。不可商用等,一切后果由使用者承担。 2. 部分字体以及插图等来自网络,若是侵权请联系删除。
资源推荐
资源详情
资源评论
收起资源包目录
前后端分离、 thinkphp5.1 、B2C 、 商城系统、前端html不包含任何php语句.zip (314个子文件)
mall_html.conf 2KB
COPYING 2KB
bootstrap.min.css 98KB
style.css 94KB
custom-ico-fonts.css 27KB
_all.css 21KB
font-awesome.css 21KB
font-awesome.css 21KB
jquery-ui-1.10.3.css 18KB
font-awesome.min.css 17KB
select2.css 17KB
select2.min.css 15KB
_all.css 15KB
_all.css 15KB
dataTables.jqueryui.min.css 14KB
layer.css 14KB
jquery.dataTables.min.css 14KB
_all.css 13KB
style-responsive.css 5KB
layer.css 5KB
dataTables.bootstrap4.min.css 5KB
tree-style.css 4KB
dataTables.bootstrap.min.css 4KB
bootstrap-reset.css 3KB
dataTables.uikit.min.css 3KB
bootstrap-fileupload.min.css 3KB
dataTables.foundation.min.css 3KB
dataTables.semanticui.min.css 3KB
dataTables.material.min.css 2KB
purple.css 2KB
yellow.css 2KB
orange.css 2KB
green.css 2KB
pink.css 2KB
aero.css 2KB
blue.css 2KB
grey.css 2KB
red.css 2KB
line.css 2KB
tree.css 2KB
purple.css 2KB
orange.css 2KB
yellow.css 2KB
purple.css 2KB
orange.css 2KB
yellow.css 2KB
green.css 2KB
green.css 2KB
pink.css 2KB
aero.css 2KB
grey.css 2KB
blue.css 2KB
all.css 2KB
grey.css 2KB
blue.css 2KB
aero.css 2KB
pink.css 2KB
red.css 2KB
red.css 2KB
minimal.css 1KB
polaris.css 1KB
jquery.stepy.css 1KB
square.css 1KB
orange.css 1KB
purple.css 1KB
yellow.css 1KB
green.css 1KB
blue.css 1KB
grey.css 1KB
pink.css 1KB
aero.css 1KB
futurico.css 1KB
red.css 1KB
flat.css 1KB
pagination.css 1KB
switchery.css 477B
custom.css 47B
variables.css 0B
mixins.css 0B
custom-ico-font.eot 173KB
fontawesome-webfont.eot 37KB
loading.gif 9KB
loading-0.gif 6KB
input-spinner.gif 2KB
loading-2.gif 2KB
loading-1.gif 701B
.gitignore 30B
index.html 7KB
login.html 4KB
footer.html 1KB
commonjs.html 942B
menu.html 902B
top.html 834B
header.html 556B
meta.html 263B
logo.html 233B
favicon.ico 894B
login-bg.jpg 150KB
lockscreen-bg.jpg 75KB
graph.jpg 23KB
共 314 条
- 1
- 2
- 3
- 4
资源评论
阿齐Archie
- 粉丝: 1w+
- 资源: 2301
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- Picasso_v3.1 2.ipa
- chromedriver-mac-arm64.zip
- 蓝zapro.apk
- chromedriver-linux64.zip
- UCAS研一深度学习实验-MNIST手写数字识别python源码+详细注释(高分项目)
- 基于Python和PyTorch框架完成的一个手写数字识别实验源码(带MINIST手写数字数据集)+详细注释(高分项目)
- 基于Matlab在MNIST数据集上利用CNN完成手写体数字识别任务,并实现单层CNN反向传播算法+源代码+文档说明(高分项目)
- NVIDIA驱动、CUDA和Pytorch及其依赖
- 基于SVM多特征融合的微表情识别python源码+项目说明+详细注释(高分课程设计)
- html动态爱心代码一(附源码)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功