Detailed description of Bootstrap's iCheck plug-ins checkbox and radio, bootstrapicheck

Detailed description of Bootstrap's iCheck plug-ins checkbox and radio, bootstrapicheck

ICheck

Features:

1. Same performance on different browsers (including ie6 +) and devices-including desktop and mobile devices

2. Supports Touch devices-iOS, Android, BlackBerry, Windows Phone, and other systems

4. Easy customization-you can use HTML and CSS to set styles for them (multiple skins)

5. Small Size-only 1 kb after gzip Compression

6. 25 parameters are used to customize the checkbox and radio buttons)

7. Eight callback events are used to monitor the status of the input box.

8. Seven methods are used to control the status of the input box through programming.

9. Synchronize the status changes in the input box to the original input box. All selectors are supported.

Usage:

$ ('Input'). iCheck ('check'); // set the status of the input box to checked.
$ ('Input'). iCheck ('uncheck'); // remove the checked status
$ ('Input'). iCheck ('toggle '); // toggle checked state
$ ('Input'). iCheck ('disable'); // set the status of the input box to disabled.
$ ('Input'). iCheck ('enabled'); // remove the disabled status
$ ('Input'). iCheck ('update'); // apply input changes, which were done outside the plugin
$ ('Input'). iCheck ('destroy'); // remove the iCheck style.

When you call iCheck, you only need to list the parameters that have modified the default value:

// Basic usage $ ('input '). iCheck ({labelHover: false, cursor: true, checkboxClass: 'icheckbox _ square-Blue', radioClass: 'iradio _ square-Blue', increaseArea: '123456 '});

The following lists the parameters and their default values:

{ 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: '' }

We can reset the style of any class listed above

Skin

Black-minimal.css // Black
Red-red.css // Red
Green-green.css // Green
Blue-blue.css // Blue
Aero-aero.css // The glass effect in win7
Grey-grey.css // silver gray
Orange-orange.css // Orange
Yellow-yellow.css // Yellow
Pink-pink.css // Pink
Purple-purple.css // Purple

(Please download these skin packages on your own)

Initialization

First, introduce the jQuery Library File

Secondly, introduce the jquery. icheck. js plug-in file.

(If you want to introduce the relevant skin, you need to introduce the relevant theme color .css file)

Callback event

ICheck supports all selectors and only works for the check box and single-choice radio buttons.

ICheck provides a large number of callback events that can be used to listen to change events.

Bind events using the on () method:

$ ('Input '). on ('ifchecked', function (event) {// ifCreated event should be bound to alert (event. type + 'callback') ;}); can the radio and checkbox sizes in bootstrap iCheck be adjusted ?. Icheckbox_square-blue ,. the iradio_square-blue {display: block; margin: 0; padding: 0; width: 22px; height: 22px; background: url(blue.png) no-repeat; border: none; cursor: pointer ;}

If you want to adjust the radioor checkboxformat of icheck, modify widthand heightthrough the original css, and modify the size of the blue.png image at the same time.

Next, let's take a look at how bootstrap icheck gets the value of radio.

For the following set of radio, how can we obtain the value 1 or 0 when using icheck?

The above section describes the iCheck plug-ins checkbox and radio of Bootstrap. I hope they will help you. If you have any questions, please leave a message and I will reply to you in a timely manner. Thank you very much for your support for the help House website!