iCheck
feature:
1. The same performance is performed on different browsers (including ie6+) and devices - including desktop and mobile devices
2. Support touch devices - iOS, Android, BlackBerry, Windows Phone and other systems
4. Convenient customization - Use HTML and CSS to style it (multiple sets of skins)
5. Small size - only 1 kb after gzip compression
6. 25 parameters are used to customize checkboxes and radio buttons.
7. 8 callback events are used to listen to the status of the input box.
8. 7 methods are used to programmatically control the status of the input box
9. It can synchronize the status changes of the input box back to the original input box, supporting all selectors
How to use:
$('input').iCheck('check'); //Set the status of the input box to checked
$('input').iCheck('uncheck'); //Remove checked status
$('input').iCheck('toggle'); //toggle checked state
$('input').iCheck('disable'); //Set the status of the input box to disabled
$('input').iCheck('enable'); //Remove disabled status
$('input').iCheck('update'); //apply input changes, which were done outside the plugin
$('input').iCheck('destroy'); //Remove iCheck style
When calling iCheck, you only need to list the parameters that have modified the default value:
//Basic usage method $('input').iCheck({ labelHover : false, cursor : true, checkboxClass : 'icheckbox_square-blue', radioClass : 'iradio_square-blue', increaseArea : '20%' });Here is the parameter list and its default values:
{ handle: '', checkboxClass: 'icheckbox', radioClass: 'iradio', checkedClass: 'checked', checkedCheckboxClass: '', checkedRadioClass: '', uncheckedCheckboxClass: '', uncheckedCheckboxClass: '', disabledClass: '', disabledCheckboxClass: '', disabledCheckboxClass: '', disabledCheckboxClass: '', disabledCheckboxClass: '', enabledCheckboxClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', enabledRadioClass: '', hoverClass: 'hover', focusClass: 'focus', activeClass: 'active', labelHover: true, labelHoverClass: 'hover', increaseArea: '', cursor: false, inheritClass: false, inheritID: false, insert: '' }We can reset the style to any of the class listed above
skin
Black ― minimum.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 packs yourself)
initialization
First, introduce jQuery library file
Secondly, introduce jquery.icheck.js plugin file
(If you want to introduce related skins, you need to introduce: related theme colors.css files)
Callback Event
iCheck supports all selectors and works only for checkbox checkbox and radio buttons
iCheck provides a large number of callback events, all of which can be used to listen for change events
Use the on() method to bind events:
$('input').on('ifChecked', function(event){ //ifCreated event should be bound to alert(event.type + ' callback'); }); Can the size of radio and checkbox in bootstrap iCheck be resized? .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; }If you want to adjust the radio or checkbox style of the icheck, modify the width and height through the above css, and at the same time modify the corresponding size of the blue.png image.
Let's see how to get the value of radio
For the following set of radios, how can you get the value value 1 or 0 when using icheck?
The above is the iCheck plug-in checkbox and radio of Bootstrap that the editor introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support to Wulin.com website!