Examples of check boxes and single-choice buttons for html form beautification plug-in iCheck custom beautification

ICheck is a jQuery display for beautifying check boxes and single-choice buttons. It can highly customize the effects of custom webpage forms and has multiple sets of alternative skin replacement solutions, it is compatible with mobile device browsers and desktop PC desktop browsers. It supports mouse and keyboard operations and lightweight plug-ins. The compressed version is only 1 kB and supports JavaScript libraries such as jQuery and Zepto.
Note: iCheck is under development. It has a huge performance improvement and many new options and methods. This is a candidate version status, so you can try to use it. Feel free to submit questions if you find a job.

Features

Same investment in different browsers and devices-desktop and mobile
Support for touch devices-iOS, Android, Windows, BlackBerry, and Amazon Kindle
You can enter-Tab, Spacebar, Arrow up/down, and other shortcuts on the keyboard.
Custom and free use of any HTML and CSS styles
Single file support for jQuery and ZeptoJavaScript libraries
Screen reader can input-ARIA voiceover and other attributes
Lightweight size: 1 kb
32 option custom check boxes and radio buttons

11. Callback handler

9 programming methods

Saves the original input, and carefully selects the input.
How to work

The constructor is the same as the checkbox and single-choice button. It will input a div for each, which may be available by you or by using a custom skin. You may also use the insert option in some HTML code or text.
For example, the following HTML code

<Label>
<Input type = "checkbox" name = "quux [1]" disabled>
Foo
</Label>
<Label for = "baz [1]"> Bar </label>
<Input type = "radio" name = "quux [2]" id = "baz [1]" checked>
<Label for = "baz [2]"> Bar </label>
<Input type = "radio" name = "quux [2]" id = "baz [2]">

Using the default options, you will obtain the following:

<Label>
<Div class = "icheckbox disabled">
<Input type = "checkbox" name = "quux [1]" disabled>
</Div>
Foo
</Label>
<Label for = "baz [1]"> Bar </label>
<Div class = "iradio checked">
<Input type = "radio" name = "quux [2]" id = "baz [1]" checked>
</Div>
<Label for = "baz [2]"> Bar </label>
<Div class = "iradio">
<Input type = "radio" name = "quux [2]" id = "baz [2]">
</Div>

By default, I do not provide any CSS styles (if you do not use skin ).
Option

These options are default:
{
// 'Checkbox' or 'Radio 'to style only checkboxes or radio buttons, both by default
Handle :'',
// Base class added to customized checkboxes
CheckboxClass: 'icheckbox ',
// Base class added to customized radio buttons
RadioClass: 'iradio ',
// Class added on checked state (input. checked = true)
CheckedClass: 'checked ',
// If not empty, used instead of 'checkedclass' option (input type specific)
CheckedCheckboxClass :'',
CheckedRadioClass :'',
// If not empty, added as class name on unchecked state (input. checked = false)
UncheckedClass :'',
// If not empty, used instead of 'uncheckedclass' option (input type specific)
UncheckedCheckboxClass :'',
UncheckedRadioClass :'',
// Class added on disabled state (input. disabled = true)
DisabledClass: 'disabled ',
// If not empty, used instead of 'disabledclass' option (input type specific)
DisabledCheckboxClass :'',
DisabledRadioClass :'',
// If not empty, added as class name on enabled state (input. disabled = false)
EnabledClass :'',
// If not empty, used instead of 'enabledclass' option (input type specific)
EnabledCheckboxClass :'',
EnabledRadioClass :'',
// Class added on indeterminate state (input. indeterminate = true)
IndeterminateClass: 'initterminate ',
// If not empty, used instead of 'initterminateclass 'option (input type specific)
IndeterminateCheckboxClass :'',
IndeterminateRadioClass :'',
// If not empty, added as class name on determinate state (input. indeterminate = false)
DeterminateClass :'',
// If not empty, used instead of 'terminateclass 'option (input type specific)
DeterminateCheckboxClass :'',
DeterminateRadioClass :'',
// Class added on hover state (pointer is moved onto input)
HoverClass: 'Hover ',
// Class added on focus state (input has gained focus)
FocusClass: 'Focal ',
// Class added on active state (mouse button is pressed on input)
ActiveClass: 'active ',
// Adds hoverClass to customized input on label hover and labelHoverClass to label on input hover
LabelHover: true,
// Class added to label if labelHover set to true
LabelHoverClass: 'Hover ',
// Increase clickable area by given % (negative number to decrease)
IncreaseArea :'',
// True to set 'pointer 'CSS cursor over enabled inputs and 'default' over disabled
Cursor: false,
// Set true to inherit original input's class name
InheritClass: false,
// If set to true, input's id is prefixed with 'icheck-'and attached
InheritID: false,
// Set true to activate ARIA support
Aria: false,
// Add HTML code or text inside customized input
Insert :''
}

You do not need to copy or paste all people. You can say what you need:

$ ('Input'). iCheck ({
LabelHover: false,
Cursor: true
});

You can choose any type of name or style as you want.

Initialization

After the jQuery plug-in (or Zepto [polyfill, event, data]) is introduced, only icheck. js is included.
I support any selection, but only process check boxes and single-choice buttons:

// Customize all inputs (will search for checkboxes and radio buttons)
$ ('Input'). iCheck ();
// Handle inputs only inside $ ('. Block ')
$ ('. Block input'). iCheck ();
// Handle only checkboxes inside $ ('. Test ')
$ ('. Test input'). iCheck ({
Handle: 'checkbox'
});
// Handle. vote class elements (will search inside the element, if it's not an input)
$ ('. Vote'). iCheck ();
// You can also change options after inputs are customized
$ ('Input. Some'). iCheck ({
// Different options
});
Indeterminate

HTML5 allows you to specify the Indeterminate ("partial" check box ). I support these two check boxes and single-choice buttons.
You can use the HTML of the additional property to make the input variable (support me ). But indeterminate = "true" cannot be used in some browsers (such as IE7 ):

Indeterminate = "true"
<Input type = "checkbox" indeterminate = "true">
<Input type = "radio" indeterminate = "true">
Determinate = "false"
<Input type = "checkbox" determinate = "false">
<Input type = "radio" determinate = "false">

Callback function

I provide a large number of callback functions that can 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 () to bind them to the input method:

$ ('Input'). on ('ifchecked', function (event ){
Alert (event. type + 'callback ');
});

The ifcreated callback should be bound to the plug-in initialization.

Method

These methods can be modified programmatically (any choice 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 'initterminate'
$ ('Interminate'). iCheck ('initterminate ');
// Remove 'initterminate' state
$ ('Input'). iCheck ('terminate ');
// Apply input changes, which were done outside the plugin
$ ('Input'). iCheck ('update ');
// Remove all traces of iCheck
$ ('Input'). iCheck ('deststroy ');
You can also specify some functions to execute each method call:
$ ('Input'). iCheck ('check', function (){
Alert ('Well done, Sir ');
});

Create and submit pull requests or submit questions at any time if you find something that doesn't work.
Comparison

I want to avoid regular re-inventing the wheel when working, check boxes and single-choice buttons. It provides a large number of browsers with the same expected results, devices, and versions. The callback method allows you to easily process and customize input changes.
There are some CSS3 methods that can be checked box and single-choice button style, like this one. You must know the disadvantages of some similar methods:
The input keyboard cannot be accessed because display: none and visibility: hidden are used to hide
Poor browser support
Multiple errors on mobile devices
Subtle, difficult to maintain CSS code
JavaScript is still a specific problem to be solved
Although the CSS3 method is a very limited solution, I replaced most tasks every day.