HTML &input& 标签的 checked 属性iCheck表单美化插件使用方法详解（含参数、事件等）
我的图书馆
iCheck表单美化插件使用方法详解（含参数、事件等）
转载地址：iCheck
1、在不同浏览器(包括ie6+)和设备上都有相同的表现 — 包括 桌面和移动设备
2、支持触摸设备 — iOS、Android、BlackBerry、Windows Phone等系统
4、方便定制 — 用HTML 和 CSS 即可为其设置样式 (多套皮肤)
5、体积小巧 — gzip压缩后只有1 kb
6、25 种参数 用来定制复选框（checkbox）和单选按钮（radio button）
7、8 个回调事件 用来监听输入框的状态
8、7个方法 用来通过编程方式控制输入框的状态
9、能够将输入框的状态变化同步回原始输入框中， 支持所有选择器
iCheck插件表单美化效果图
使用方法：
$('input').iCheck('check');&&&//将输入框的状态设置为checked&$('input').iCheck('uncheck');&//移除&checked&状态&$('input').iCheck('toggle');&&//toggle&checked&state&$('input').iCheck('disable');&//将输入框的状态设置为&disabled&$('input').iCheck('enable');&&//移除&disabled&状态&$('input').iCheck('update');&&//apply&input&changes,&which&were&done&outside&the&plugin&$('input').iCheck('destroy');&//移除iCheck样式&
调用iCheck时，只需要将修改了默认值的参数列出来即可：
//基础使用方法&$('input').iCheck({&&&labelHover&:&false,&&&cursor&:&true,&&&checkboxClass&:&'icheckbox_square-blue',&&&radioClass&:&'iradio_square-blue',&&&increaseArea&:&'20%'&});&
下面是参数列表及其默认值：
{&&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:&''&}&
我们可以对上面列出的任何class重置样式
Black — minimal.css &//黑色
Red — red.css &//红色
Green — green.css &//绿色
Blue — blue.css &//蓝色
Aero — aero.css //win7中的那种玻璃效果
Grey — grey.css &//银灰色
Orange — orange.css &//橙色
Yellow — yellow.css &//黄色
Pink — pink.css &//粉红色
Purple — purple.css &//紫色
（请自行下载这些皮肤包）
首先，引入jQuery库文件
其次，引入jquery.icheck.js插件文件
（如果要引入相关皮肤，则需引入：相关主题颜色.css文件）
iCheck支持所有选择器（selectors），并且只针对复选框checkbox和单选radio按钮起作用
iCheck提供了大量回调事件，都可以用来监听change事件
&ifClicked
&用户点击了自定义的输入框或与其相关联的label
&ifChanged
&输入框的 checked 或 disabled 状态改变了
&ifChecked
&输入框的状态变为 checked
&ifUnchecked
&checked 状态被移除
&ifDisabled
&输入框状态变为 disabled
&ifEnabled
&disabled 状态被移除
&ifCreated
&输入框被应用了iCheck样式
&ifDestroyed
&iCheck样式被移除
&使用on()方法绑定事件：
$('input').on('ifChecked',&function(event){&//ifCreated&事件应该在插件初始化之前绑定&&&alert(event.type&+&'&callback');&});&
bootstrap iCheck中的radio和checkbox的大小可以调整吗？
.icheckbox_square-blue,&.iradio_square-blue&{&&&display:&&&&margin:&0;&&&padding:&0;&&&width:&22&&&height:&22&&&background:&url(blue.png)&no-&&&border:&&&&cursor:&&}&
如果要调整icheck的radio或checkbox样式，通过上面的css修改width和height，同时修改blue.png图片对应的尺寸。
&（在github上托管，如果无法下载，请从我的）
尊重知识产权，文章转载请注明来源：&&&&
TA的最新馆藏[转]&[转]&
喜欢该文的人也喜欢2643人阅读
jQuery（8）
JavaScript（10）
在不同浏览器和设备上都有相同的表现&— 包括&桌面和移动设备支持触摸设备&— iOS、Android、BlackBerry、Windows Phone支持键盘导航&—&Tab、Spacebar、Arrow
up/down&和其它快捷键方便定制&— 用HTML 和 CSS 即可为其设置样式 (试试&6
套针对Retina屏幕的皮肤吧)支持 jQuery 和 Zepto&JavaScript工具库体积小巧&— gzip压缩后只有1 kb25
种参数&用来定制复选框（checkbox）和单选按钮（radio button）8 个回调事件&用来监听输入框的状态7 个方法&用来通过编程方式控制输入框的状态能够将输入框的状态变化同步回原始输入框中，&支持所有选择器
你可以通过insert参数向这个div中放置HTML代码或文本。
对于下面这段HTML代码：
&input type=&checkbox& name=&quux[1]& disabled&
&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]&&
在默认参数下使用iCheck时会得到如下结果：
&div class=&icheckbox disabled&&&input type=&checkbox& name=&quux[1]& disabled&&/div&
&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&
默认情况下，iCheck并不会给输入框外面包裹的div设置任何CSS样式（在你不使用皮肤的时）。
下面是参数列表及其默认值：
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: ''
调用iCheck时，只需要将修改了默认值的参数列出来即可：
$('input').iCheck({
labelHover: false,
cursor: true
你可以对上面列出的任何class重置样式。
首先引入&(或&)，然后引入jquery.icheck.js&(或者zepto.icheck.js)
iCheck支持所有选择器（selectors），并且只针对复选框和单选按钮起作用：
$('input').iCheck();
$('.block input').iCheck();
$('.test input').iCheck({
handle: 'checkbox'
$('.vote').iCheck();
$('input.some').iCheck({
用户点击了自定义的输入框或与其相关联的label
输入框的&checked&或&disabled&状态改变了
输入框的状态变为&checked
ifUnchecked
checked&状态被移除
ifDisabled
输入框状态变为&disabled
disabled&状态被移除
输入框被应用了iCheck样式
ifDestroyed
iCheck样式被移除
使用on()方法绑定事件：
$('input').on('ifChecked', function(event){
alert(event.type + ' callback');
ifCreated&事件应该在插件初始化之前绑定。
$('input').iCheck('check');&— 将输入框的状态设置为checked
$('input').iCheck('uncheck');&— 移除&checked&状态
$('input').iCheck('toggle');&— toggle&checked&state
$('input').iCheck('disable');&— 将输入框的状态设置为&disabled
$('input').iCheck('enable');&— 移除&disabled&状态
$('input').iCheck('update');&— apply input changes, which were done outside the plugin
$('input').iCheck('destroy');&— 移除iCheck样式
iCheck被创造出来是为了避免重复造车轮。它针对大量浏览器、设备和使用者提供了同样的表现方式。回调事件和方法可以被用来很容易的处理自定义的输入框的状态的变化。
还有一些利用 CSS3 技术给复选框和单选按钮设置样式的途径。例如。下面列出了此类方法的限制和不足：
— inputs are keyboard inaccessible, since&display: none&or&visibility:
hidden&used to hide them— poor browser support— multiple bugs on mobile devices— tricky, harder to maintain CSS code— JavaScript is still needed to fix specific issues
While CSS3 method is quite limited solution, iCheck is made to be an everyday replacement covering most of the tasks.
浏览器支持
iCheck已经在 Internet Explorer 6+、Firefox 2+、Opera 9+、Google Chrome 和 Safari 浏览器上被验证过，并且应该可以再更多浏览器上工作。
移动浏览器(例如 Opera mini、 Chrome mobile、 Safari mobile 和其它浏览器) 也被支持。已经在 iOS (iPad、 iPhone、 iPod)、Android、BlackBerry 和 Windows Phone 设备上进行了测试。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：61497次
排名：千里之外
原创：31篇
评论：41条
阅读：3763
(1)(1)(1)(1)(4)(3)(2)(7)(4)(4)(3)(1)(9)(1)
(window.slotbydup = window.slotbydup || []).push({
id: '4740887',
container: s,
size: '250,250',
display: 'inlay-fix'iCheck插件 全选和获取value值的解决方法 - 推酷
iCheck插件 全选和获取value值的解决方法
在使用jQuery iCheck 插件的时候遇到了一个问题，就是当我们使用普通的js全选功能无效了。
$(&#checkall&).click(
function(){
if(this.checked){
$(&input[name='checkname']&).each(function(){this.checked=});
$(&input[name='checkname']&).each(function(){this.checked=});
这样来写对默认的checkbox框没问题，但是当使用iCheck 插件后将无效。
那么该怎么解决呢？
最后是在stackoverflow 找到的解决方法：
地址是这里：
//全选获取数值
var checkAll = $('input.all');
var checkboxes = $('input.check');
checkAll.on('ifChecked ifUnchecked', function(event) {
if (event.type == 'ifChecked') {
checkboxes.iCheck('check');
checkboxes.iCheck('uncheck');
checkboxes.on('ifChanged', function(event){
if(checkboxes.filter(':checked').length == checkboxes.length) {
checkAll.prop('checked', 'checked');
checkAll.removeProp('checked');
checkAll.iCheck('update');
在解决了全选问题后，又遇到了一个新的问题，获取选中的checkbox的value的时候，使用：$(this).attr('checked');获取不到值了~，蛋疼。
最后几经Google搜索，还是在stackoverflow 找到了启发，判断checkbox的布尔值，使用 ：$(this).is(':checked');
最后代码的解决方法如下：
$(&.ajax-delete&).click(function(){
var url = $(this).attr('data-url');
var str=&&;
var ids=&&;
$(&input[name='id']:checkbox&).each(function(){
if(true == $(this).is(':checked')){
str+=$(this).val()+&,&;
if(str.substr(str.length-1)== ','){
ids = str.substr(0,str.length-1);
console.log(ids);
已发表评论数()
请填写推刊名
描述不能大于100个字符!
权限设置： 公开
仅自己可见
正文不准确
标题不准确
排版有问题
主题不准确
没有分页内容
图片无法显示
视频无法显示
与原文不一致}