README

安装

Composer

composer require gaomingcode/icheck

原始ReadMe

HTML5 允许指定复选框的“不确定”状态（部分选中）。iCheck 支持复选框和单选按钮都实现这一功能。

您可以通过 HTML 使用额外的属性（由 iCheck 支持）使输入处于不确定状态。这两个都做相同的工作，但 indeterminate="true" 在某些浏览器（如 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">

indeterminate 和 determinate 方法可以用来切换不确定状态。

回调函数

iCheck 提供了丰富的回调函数，可用于处理变化。

使用 on() 方法将它们绑定到输入上

$('input').on('ifChecked', function(event){
  alert(event.type + ' callback');
});

ifCreated 回调应在插件初始化之前绑定。

方法

这些方法可用于程序化地更改（可以使用任何选择器）

// 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 'indeterminate'
$('input').iCheck('indeterminate');

// remove 'indeterminate' state
$('input').iCheck('determinate');

// apply input changes, which were done outside the plugin
$('input').iCheck('update');

// remove all traces of iCheck
$('input').iCheck('destroy');

您还可以指定一些函数，该函数将在每个方法调用时执行

$('input').iCheck('check', function(){
  alert('Well done, Sir');
});

欢迎fork并提交pull-request，或者在发现某些功能不起作用时提交问题。

比较

iCheck 是为了避免在处理复选框和单选按钮时重复造轮子而创建的。它为大量浏览器、设备和它们的版本提供了一致的预期结果。回调函数和方法可以用来轻松处理和更改自定义输入。

有一些CSS3方法可以用来样式化复选框和单选按钮，比如这个。您需要了解一些类似方法的一些缺点

由于使用 display: none 或 visibility: hidden 隐藏它们，输入无法通过键盘访问
浏览器支持有限
在移动设备上有多个错误
CSS代码难以维护
仍然需要JavaScript来解决特定问题

虽然CSS3方法是一个相当有限的解决方案，但iCheck旨在成为一个日常替代品，覆盖大多数任务。

浏览器支持

iCheck 已验证在 Internet Explorer 6+、Firefox 2+、Opera 9+、Google Chrome 和 Safari 浏览器中工作。也应支持许多其他浏览器。

移动浏览器（如 Opera mini、Chrome 移动、Safari 移动、Android 浏览器、Silk 等）也受支持。已在 iOS（iPad、iPhone、iPod）、Android、BlackBerry 和 Windows Phone 设备上测试。

变更日志

2020年10月10日

支持 iOS 13 @markusbroman
重新格式化变更日志 @lasseeee
当切换时触发更改事件 @rafatmyo

2014年3月3日

改进了对 HiDPI 屏幕的支持 @ddctd143

2014年1月23日 (v2.0 发布候选版本)

三种设置选项的方式：全局对象（window.icheck）、数据属性（<input data-checkedClass="checked"）和直接 JavaScript 对象（$(input).icheck({ options })）
性能大幅提升（定制 1000 个输入只需不到 1 秒）
最小化函数调用次数（将一些慢的 jQuery 函数替换为更快的纯 JavaScript 代替品，而不使用任何依赖项）
支持 AMD 模块定义（jQuery 和 Zepto 都支持）
解除阻塞原生事件 - iCheck 2.x 不会阻止您新绑定或过去绑定的事件被处理
指针事件支持 - 充分支持使用 Windows OS 的手机和平板（如 Lumia、HP 平板、带触屏的台式机等）
WebOS 和 Firefox OS 支持
新方法：使用 $(input).icheck('data') 获取用于定制的所有选项（也存储当前状态值 - checked、disabled 和 indeterminate），使用 $('input').icheck('styler') 获取包装 div（用于定制）
更好地处理 indeterminate 状态
三种方式设置回调：全局对象、直接 JavaScript 对象或使用 bind 方法（$(input).on(callback)）
在不需要时关闭一些回调（全局或按输入）
移除内联样式 - iCheck 除非高度需要（如 cursor 或 area 选项），否则不会向元素添加任何内联样式
快速点击支持 - 移除移动设备上的 300ms 点击延迟，无需任何依赖（iCheck 与 fastclick 插件兼容），请参阅 tap 选项
使用 init 选项忽略选定输入的定制（如果设置为 false）
优化事件绑定 - iCheck 只为所有输入绑定少量全局事件（元素添加时不会增加），而不是为每个定制的元素绑定多个
不存储大量任意数据（即使在 jQuery 或 Zepto 缓存中），通过特定的类名定义自定义元素
移除额外的 ins 标签（减少 DOM 修改），iCheck 将每个输入包装在一个单独的 div 中，并且不使用任何额外的标记为任何选项
优化初始化和状态变化时的重排和重绘
更好的选项处理 - iCheck 永远不会运行任何单行 JS 来处理关闭或空的选项
无需使用任何额外代码即可自动定制 Ajax 加载的输入（autoAjax 选项，默认开启）
使用指定的选择器在 domready 时自动初始化（autoInit 选项） - 默认搜索 .icheck。类名可以使用 window.classes 对象更改
内存使用优化 - 只使用少量内存（在低内存设备上表现良好）
更好的回调架构 - 这些回调仅在输入应用更改后才会触发
使用 hoverLabelClass、focusLabelClass、activeLabelClass、checkedLabelClass、disabledLabelClass 和 indeterminateLabelClass 选项设置输入和分配的标签之间的镜像类（mirror 选项应设置为 true 以使其发生）
修复了移动设备的一些问题
修复了包装标签的问题，在一些浏览器中（如果未设置 for 属性）会丢失点击能力
一些其他选项和改进
各种错误修复

注意：扩展文档和使用示例将在以后提供。

2013年12月19日

添加了 Bower 支持
添加到 jQuery 插件注册处

2013年12月18日

添加了 ARIA 属性支持（用于语音控制等）@myfreeweb
添加了 Amazon Kindle 支持 @skinofstars
修复了标签内可点击链接的问题 @LeGaS
修复了标签和输入之间的线条分隔问题
合并了两个插件的两个版本（jQuery 和 Zepto）
修复了演示链接
修复了回调 @PepijnSenders

许可证

iCheck 插件根据 MIT 许可证发布。您可以在个人和商业项目中自由使用它。

gaomingcode / icheck

维护者

详细信息