Bootstrap Icheck plug-in checkbox and Radio

Icheck

Features:

1, in different browsers (including ie6+) and equipment have the same performance-including desktop and mobile devices

2, Support touch equipment-ios, Android, BlackBerry, Windows phone and other systems

4, convenient customization-with HTML and CSS can be set for its style (multiple sets of skin)

5, small size-gzip compressed only 1 KB

6, 25 parameters to customize check box (checkbox) and radio button (radio button)

7, 8 callback events to listen for the status of the input box

8, 7 ways to programmatically control the state of an input box

9, to be able to change the status of the input box back to the original input box, support all selectors
Icheck plug-in form beautification effect chart use method:

$ (' input '). Icheck (' check '); Set the status of the input box to checked $ (' input '). Icheck (' uncheck ');  Removes the checked state $ (' input '). Icheck (' toggle '); Toggle checked state $ (' input '). Icheck (' disable ');  Set the status of the input box to Disabled $ (' input '). Icheck (' Enable ');  Removes the disabled state $ (' input '). Icheck (' Update '); Apply input changes, which were done outside the plugin $ (' input '). Icheck (' destroy '); When you remove the Icheck style call to Icheck, you only need to list the parameters that modify the default values:

Basic use Method $ (' input '). Icheck ({labelhover:false, cursor:true, Checkboxclass: ' Icheckbox_square-blue ', Radi  Oclass: ' Iradio_square-blue ', Increasearea: ' 20% '}); The following is a list of 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 make a list of anyClass Reset Style  

Skin

BLACK-MINIMAL.CSS//Black

RED-RED.CSS//Red

GREEN-GREEN.CSS//Green

BLUE-BLUE.CSS//Blue

The kind of glass effect in Aero-aero.css//win7

GREY-GREY.CSS//Silver Grey

ORANGE-ORANGE.CSS//Orange

YELLOW-YELLOW.CSS//Yellow

PINK-PINK.CSS//Pink

PURPLE-PURPLE.CSS//Purple

(Please download these skin packs yourself)

Initialization of

First, the jquery library file is introduced

Second, the introduction of Jquery.icheck.js plug-in files

(If you want to introduce related skin, you need to introduce: related theme colors. css files) callback event Icheck supports all selectors (selectors) and only works for CheckBox checkboxes and Radio radio buttons Icheck provides a large number of callback events that can be used to listen for change events

Event name	Time to use
Ifclicked	User clicks on the Custom input box or its associated label
Ifchanged	The checked or disabled state of the input box changed
Ifchecked	The status of the input box changes to checked
Ifunchecked	Checked state is removed
Ifdisabled	The input box status changes to Disabled
Ifenabled	Disabled state is removed
ifcreated	The input box is applied Icheck style
Ifdestroyed	The Icheck style has been removed

To bind an event using the On () method:

$ (' input '). On (' ifchecked ', function (event) {//ifcreated event should bind alert (Event.type + ' callback ') before plug-in initialization; });

Are the radio and checkbox sizes in the bootstrap Icheck adjustable?

. 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 Icheck radio or CheckBox style, modify the width and height with the above CSS, and modify the size of the blue.png picture.