JqueryiCheck插件的使用

2023年6月21日发(作者：)

JqueryiCheck插件的使⽤Query中的插件⾮常多，jQuery Validate就是专门⽤来在前端页⾯上做表单验证的；在做表单的时候，除了验证，我们可能还会希望表单中的checkbox、radio的样式能够美观⼀些，这个时候jQuery iCheck就能派上⼤⽤场。从jQuery iCheck的官⽹上可以看到，这⼀款插件于2013年12⽉19⽇发布1.0.1版本，2014年3⽉3⽇发布1.0.2版本，时⾄今⽇也有七⼋年时间，已经不算太新的插件了。这么好的插件，怎么到今⽇才遇到它，相恨遇晚呀，⼀定要先⽤起来。概要表单复选框、单选框控件美化插件，主要作⽤为：渲染并美化当前页⾯的复选框或单选框响应复选框或单选框的点击事件简介jQuery iCheck是表单复选框、单选框控件的样式美化插件，样式渲染和美化过后，原来的某些事件可能就失去了作⽤，这时就需要⽤插件内置的回调事件，来监听Change事件了。页⾯引⽤css部分js部分

激活iCheck即使引⽤了CSS、JS⽂件，默认情况下iCheck还是不⽣效的，可以结合CSS⽤js来激活；既可以全局激活，也可以局部激活；回调事件iCheck 提供了⼤量回调事件，都可以⽤来监听 change 事件事件名称 | 何时使⽤ifClicked | ⽤户点击了⾃定义的输⼊框或与其相关联的 labelifChanged | 输⼊框的 checked 或 disabled 状态改变了ifChecked | 输⼊框的状态变为 checkedifUnchecked | checked 状态被移除ifDisabled | 输⼊框状态变为 disabledifEnabled | disabled 状态被移除ifCreated | 输⼊框被应⽤了 iCheck 样式ifDestroyed | iCheck 样式被移除⽐较全的英⽂版ifClicked | user clicked on a customized input or an assigned labelifChanged | input's checked, disabled or indeterminate state is changedifChecked | input's state is changed to checkedifUnchecked | checked state is removedifToggled | input's checked state is changedifDisabled | input's state is changed to disabledifEnabled | disabled state is removedifIndeterminate | input's state is changed to indeterminateifDeterminate | indeterminate state is removedifCreated | input is just customizedifDestroyed | customization is just removed⽅法下⾯这些⽅法可以⽤来通过编程⽅式改变输⼊框状态（可以使⽤任何选择器）：$('input').iCheck('check'); — change input's state to checked 将输⼊框的状态设置为checked$('input').iCheck('uncheck'); — remove checked state 移除checked状态$('input').iCheck('toggle'); — toggle checked state 切换事件$('input').iCheck('disable'); — change input's state to disabled 将输⼊框的状态设置为disable，禁⽤点击$('input').iCheck('enable'); — remove disabled state 移除disabled状态，变为可点击状态$('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简单⽰例：

在这⾥⼀共写了三个简单的⽰例，都是⽐较常⽤的；第⼀个⽰例，是复选框的点击与获取；第⼆个⽰例是单选框的选择域获取；第三个是⽪肤切换⽰例；三个例⼦都⽐较简单，⼀看就会；还有其他的事件和⽅法，在需要的时候再试⼀试吧。⽰例效果JQuery系列笔记：还在为表单批量验证烦恼，看看使⽤te如何做

2023年6月21日发(作者：)

JqueryiCheck插件的使⽤Query中的插件⾮常多，jQuery Validate就是专门⽤来在前端页⾯上做表单验证的；在做表单的时候，除了验证，我们可能还会希望表单中的checkbox、radio的样式能够美观⼀些，这个时候jQuery iCheck就能派上⼤⽤场。从jQuery iCheck的官⽹上可以看到，这⼀款插件于2013年12⽉19⽇发布1.0.1版本，2014年3⽉3⽇发布1.0.2版本，时⾄今⽇也有七⼋年时间，已经不算太新的插件了。这么好的插件，怎么到今⽇才遇到它，相恨遇晚呀，⼀定要先⽤起来。概要表单复选框、单选框控件美化插件，主要作⽤为：渲染并美化当前页⾯的复选框或单选框响应复选框或单选框的点击事件简介jQuery iCheck是表单复选框、单选框控件的样式美化插件，样式渲染和美化过后，原来的某些事件可能就失去了作⽤，这时就需要⽤插件内置的回调事件，来监听Change事件了。页⾯引⽤css部分js部分

激活iCheck即使引⽤了CSS、JS⽂件，默认情况下iCheck还是不⽣效的，可以结合CSS⽤js来激活；既可以全局激活，也可以局部激活；回调事件iCheck 提供了⼤量回调事件，都可以⽤来监听 change 事件事件名称 | 何时使⽤ifClicked | ⽤户点击了⾃定义的输⼊框或与其相关联的 labelifChanged | 输⼊框的 checked 或 disabled 状态改变了ifChecked | 输⼊框的状态变为 checkedifUnchecked | checked 状态被移除ifDisabled | 输⼊框状态变为 disabledifEnabled | disabled 状态被移除ifCreated | 输⼊框被应⽤了 iCheck 样式ifDestroyed | iCheck 样式被移除⽐较全的英⽂版ifClicked | user clicked on a customized input or an assigned labelifChanged | input's checked, disabled or indeterminate state is changedifChecked | input's state is changed to checkedifUnchecked | checked state is removedifToggled | input's checked state is changedifDisabled | input's state is changed to disabledifEnabled | disabled state is removedifIndeterminate | input's state is changed to indeterminateifDeterminate | indeterminate state is removedifCreated | input is just customizedifDestroyed | customization is just removed⽅法下⾯这些⽅法可以⽤来通过编程⽅式改变输⼊框状态（可以使⽤任何选择器）：$('input').iCheck('check'); — change input's state to checked 将输⼊框的状态设置为checked$('input').iCheck('uncheck'); — remove checked state 移除checked状态$('input').iCheck('toggle'); — toggle checked state 切换事件$('input').iCheck('disable'); — change input's state to disabled 将输⼊框的状态设置为disable，禁⽤点击$('input').iCheck('enable'); — remove disabled state 移除disabled状态，变为可点击状态$('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简单⽰例：

在这⾥⼀共写了三个简单的⽰例，都是⽐较常⽤的；第⼀个⽰例，是复选框的点击与获取；第⼆个⽰例是单选框的选择域获取；第三个是⽪肤切换⽰例；三个例⼦都⽐较简单，⼀看就会；还有其他的事件和⽅法，在需要的时候再试⼀试吧。⽰例效果JQuery系列笔记：还在为表单批量验证烦恼，看看使⽤te如何做