Detailed bootstrap Icheck plug-in checkbox and Radio_jquery

Icheck

Characteristics:

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

How to use:

$ (' input '). Icheck (' check '); Set the status of the input box to checked
$ (' input '). Icheck (' uncheck '); Remove checked state
$ (' input '). Icheck (' toggle '); Toggle checked State
$ (' input '). Icheck (' disable '); Set the status of the input box to Disabled
$ (' input '). Icheck (' Enable '); Remove disabled state
$ (' 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 the default values modified:

Basic use Method 
$ (' input '). Icheck ({ 
labelhover:false, 
cursor:true, 
checkboxclass: ' Icheckbox_ Square-blue ', 
radioclass: ' 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 reset the style to any class listed above

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)

Class

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 works only for check box checkboxes and radio radio buttons

Icheck provides a large number of callback events that can be used to listen for change events

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); Can the size of radio and checkbox in Bootstrap Icheck be adjusted?
. 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.

Look below bootstrap Icheck how to get the value of radio

For the following set of radio, how do you get the value 1 or 0 when using Icheck?

The above is a small set to introduce the Bootstrap Icheck plug-in checkbox and radio, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!