PHPackages                             gaomingcode/icheck - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. gaomingcode/icheck

ActiveLibrary

gaomingcode/icheck
==================

Highly customizable checkboxes and radio buttons (jQuery & Zepto).

1.0.3(4y ago)035MITCSS

Since Jun 3Pushed 4y agoCompare

[ Source](https://github.com/gaomingcode/icheck)[ Packagist](https://packagist.org/packages/gaomingcode/icheck)[ Docs](http://fronteed.com/iCheck)[ RSS](/packages/gaomingcode-icheck/feed)WikiDiscussions master Synced 5d ago

READMEChangelog (1)DependenciesVersions (2)Used By (0)

iCheck
======

[](#icheck)

[![GitHub Version](https://camo.githubusercontent.com/005c9aa30c68019131d96851ecd9ff55af56e5439a79daf30a2e711d3d23ceb2/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f67616f6d696e67636f64652f69636865636b2e737667)](https://github.com/gaomingcode/icheck)[![Packagist Downloads](https://camo.githubusercontent.com/32607ebd3996f41e04255e43fc495d88c5ebd5ce1d3a2a1f857499dec1a971a4/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f646d2f67616f6d696e67636f64652f69636865636b)](https://github.com/gaomingcode/icheck)[![Github License](https://camo.githubusercontent.com/06a4b3cc4a4cf554e6787759ee94df5b5f0a8420893ff1084a4c78705d01724c/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f67616f6d696e67636f64652f69636865636b)](https://github.com/gaomingcode/icheck)

Installation
------------

[](#installation)

### Composer

[](#composer)

```
composer require gaomingcode/icheck

```

ReadMe from Origin
------------------

[](#readme-from-origin)

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):

```
indeterminate="true"

determinate="false"

```

`indeterminate` and `determinate` [methods](#methods) can be used to toggle indeterminate state.

Callbacks
---------

[](#callbacks)

iCheck provides plenty callbacks, which may be used to handle changes.

   Callback name When used     ifClicked user clicked on a customized input or an assigned label   ifChanged input's "checked", "disabled" or "indeterminate" state is changed   ifChecked input's state is changed to "checked"   ifUnchecked "checked" state is removed   ifToggled input's "checked" state is changed   ifDisabled input's state is changed to "disabled"   ifEnabled "disabled" state is removed   ifIndeterminate input's state is changed to "indeterminate"   ifDeterminate "indeterminate" state is removed   ifCreated input is just customized   ifDestroyed customization is just removed  Use `on()` method to bind them to inputs:

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

`ifCreated` callback should be binded before plugin init.

Methods
-------

[](#methods)

These methods can be used to make changes programmatically (any selectors can be used):

```
// change input's state to 'checked'
$('input').iCheck('check');

// remove 'checked' state
$('input').iCheck('uncheck');

// toggle 'checked' state
$('input').iCheck('toggle');

// change input's state to 'disabled'
$('input').iCheck('disable');

// remove 'disabled' state
$('input').iCheck('enable');

// change input's state to 'indeterminate'
$('input').iCheck('indeterminate');

// remove 'indeterminate' state
$('input').iCheck('determinate');

// apply input changes, which were done outside the plugin
$('input').iCheck('update');

// remove all traces of iCheck
$('input').iCheck('destroy');
```

You may also specify some function, that will be executed on each method call:

```
$('input').iCheck('check', function(){
  alert('Well done, Sir');
});
```

Feel free to fork and submit pull-request or submit an issue if you find something not working.

Comparison
----------

[](#comparison)

iCheck is created to avoid routine of reinventing the wheel when working with checkboxes and radio buttons. It provides an expected identical result for the huge number of browsers, devices and their versions. Callbacks and methods can be used to easily handle and make changes at customized inputs.

There are some CSS3 ways available to style checkboxes and radio buttons, like [this one](http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-easy-css3-checkboxes-and-radio-buttons/). You have to know about some of the disadvantages of similar methods:

- inputs are keyboard inaccessible, since `display: none` or `visibility: hidden` used to hide them
- poor browser support
- multiple bugs on mobile devices
- tricky, harder to maintain CSS code
- JavaScript is still needed to fix specific issues

While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.

Browser support
---------------

[](#browser-support)

iCheck is verified to work in Internet Explorer 6+, Firefox 2+, Opera 9+, Google Chrome and Safari browsers. Should also work in many others.

Mobile browsers (like Opera mini, Chrome mobile, Safari mobile, Android browser, Silk and others) are also supported. Tested on iOS (iPad, iPhone, iPod), Android, BlackBerry and Windows Phone devices.

Changelog
---------

[](#changelog)

October 10, 2020
----------------

[](#october-10-2020)

- iOS 13 support @markusbroman
- Reformatted changelog @lasseeee
- Fire change event when toggled @rafatmyo

### March 03, 2014

[](#march-03-2014)

- Better HiDPI screens support @ddctd143

### January 23, 2014 ([v2.0 release candidate](https://github.com/fronteed/icheck/tree/2.x))

[](#january-23-2014-v20-release-candidate)

- Three ways to set an options: global object (`window.icheck`), data attributes (`