icheck plugin works with checkboxes and radio buttons like a constructor.
it wraps each input with a div, which may be customized by you or using one of the available skins.
you may also place inside that div some html code or text using insert option.

for this html:

Bạn đang xem: Checkboxes and radio buttons customization (jQuery and Zepto) plugin

 <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]"> 

with default options you’ll get nearly this:

 <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, icheck doesn’t provide any css styles for wrapper divs (if you don’t use skins).

options

these options are default:

  handle: '', checkboxclass: 'icheckbox', radioclass: 'iradio', checkedclass: 'checked', checkedcheckboxclass: '', checkedradioclass: '', uncheckedclass: '', uncheckedcheckboxclass: '', uncheckedradioclass: '', disabledclass: 'disabled', disabledcheckboxclass: '', disabledradioclass: '', enabledclass: '', enabledcheckboxclass: '', enabledradioclass: '', indeterminateclass: 'indeterminate', indeterminatecheckboxclass: '', indeterminateradioclass: '', determinateclass: '', determinatecheckboxclass: '', determinateradioclass: '', hoverclass: 'hover', focusclass: 'focus', activeclass: 'active', labelhover: true, labelhoverclass: 'hover', increasearea: '', cursor: false, inheritclass: false, inheritid: false, aria: false, insert: ''  

there’s no need to copy and paste all of them, you can just mention the ones you need:

 $('input').icheck( labelhover: false, cursor: true ); 

you can choose any class names and slyle them as you want.

initialize

just include icheck.js after jquery v1.7+ (or zepto [polyfill, event, data]).

Xem thêm: Manabie – Learning App – Apps on Google Play

icheck supports any selectors, but handles only checkboxes and radio buttons:

 $('input').icheck(); $('.block input').icheck(); $('.test input').icheck( handle: 'checkbox' ); $('.vote').icheck(); $('input.some').icheck( ); 

indeterminate

html5 allows specifying indeterminate (“partially” checked) state for checkboxes. icheck supports it for both checkboxes and radio buttons.

you can make an input indeterminate through html using additional attributes (supported by icheck). both do the same job, but indeterminate=”true” may not work in some browsers (like ie7):

 <input type="checkbox" indeterminate="true"> <input type="radio" indeterminate="true"> <input type="checkbox" determinate="false"> <input type="radio" determinate="false"> 

indeterminate and determinate methods can be used to toggle indeterminate state.

callbacks

icheck provides plenty callbacks, which may 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() method to bind them to inputs:

 $('input').on('ifchecked', function(event) alert(event.type + ' callback'); ); 

ifcreated callback should be binded before plugin init.

methods

these methods can be used to make changes programmatically (any selectors can be used):

$(‘input’).icheck(‘check’); — change input’s state to checked

$(‘input’).icheck(‘uncheck’); — remove checked state

$(‘input’).icheck(‘toggle’); — toggle checked state

Xem thêm: Download game Dò Mìn cho điện thoại miễn phí

$(‘input’).icheck(‘disable’); — change input’s state to disabled

$(‘input’).icheck(‘enable’); — remove disabled state

$(‘input’).icheck(‘indeterminate’); — change input’s state to indeterminate

$(‘input’).icheck(‘determinate’); — remove indeterminate state

$(‘input’).icheck(‘update’); — apply input changes, which were done outside the plugin

$(‘input’).icheck(‘destroy’); — remove all traces of icheck

you may also specify some function, that will be executed on each method call:

 $('input').icheck('check', function() alert('well done, sir'); ); 

feel không tính tiền to fork and submit pull-request or submit an issue if you find something not working.

Nguồn: https://ngoalongtamquoc.vn
Danh mục: APP MOBILE