iCheck 单选按钮

介绍

iCheck 是一个 jQuery 插件，它可以改进标准的网页单选按钮和复选框。 它是用 Canvas 和 CSS 实现的，可以通过不同的样式来自定义外观，而且支持高DPR屏幕和响应式布局。

特性

• 可以自定义 CSS 样式
• 可以创建基于图片的自定义皮肤
• 支持触摸屏设备
• 支持各种现代浏览器，包括 IE6+

安装和使用

安装

你可以从 GitHub 下载压缩包，或者使用 NPM 安装：

npm install icheck

使用

1. 引入 jQuery 和 iCheck：

<script src="//code.jquery.com/jquery-3.4.1.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/skins/all.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/iCheck/1.0.2/icheck.min.js"></script>

2. 将标准的 HTML 单选按钮或复选框转换成 iCheck 风格：

<input type="radio" name="test" class="icheck" />

<script>
$(document).ready(function(){
  $('.icheck').iCheck({
    checkboxClass: 'icheckbox_square-blue',
    radioClass: 'iradio_square-blue',
    increaseArea: '20%' // 扩大响应区域
  });
});
</script>

自定义样式

iCheck 默认提供了多种皮肤，不过你也可以自己定制 CSS 样式来实现自己的风格。

自定义 CSS

<!-- HTML -->
<label>
  <input type="checkbox" name="myCheckbox" class="icheck" />
  Click me
</label>

<!-- CSS -->
.icheckbox {
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  margin: 0;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #b4b4b4;
  border-radius: 2px;
  box-sizing: border-box;
  position: relative;
}

.icheckbox:after {
  content: '';
  display: block;
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  background-color: #4ca1af;
  border-radius: 1px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
  opacity: 0;
  transition: all 0.2s ease-in-out;
}

.icheckbox:checked:after {
  opacity: 1;
}

自定义图片皮肤

<!-- HTML -->
<label>
  <input type="checkbox" name="myCheckbox" class="icheck" data-checkbox="icheckbox_square-blue" />
  Click me
</label>

<!-- CSS -->
.icheckbox_square-blue {
  background-image: url("icheckbox_square-blue.png");
  background-repeat: no-repeat;
  background-position: center center;
}

.iradio_square-blue {
  background-image: url("iradio_square-blue.png");
  background-repeat: no-repeat;
  background-position: center center;
}

API 文档

iCheck(settings)

初始化 iCheck

$(selector).iCheck(options);

参数：

• options (object): 配置选项，默认选项如下

  {
    checkboxClass: 'icheckbox',
    radioClass: 'iradio',
    increaseArea: '20%'
  }
  

  其中：

  • checkboxClass (string): 复选框的样式类名，默认是 icheckbox
  • radioClass (string): 单选按钮的样式类名，默认是 iradio
  • increaseArea (string): 增加响应区域的百分比，可以设置为 -10% 来缩小响应区域

.iCheck('update')

更新 iCheck，如果 DOM 结构或者样式发生了变化，则需要调用此方法重新渲染 iCheck。

$(selector).iCheck('update');

.iCheck('destroy')

销毁 iCheck，还原为标准的单选按钮或复选框。

$(selector).iCheck('destroy');

总结

iCheck 是一个非常方便的 jQuery 插件，它可以让我们轻松创建漂亮的单选按钮和复选框。它的样式可以自定义，也支持创建基于图片的皮肤。如果你想要改进你的网页表单，iCheck 绝对是一个不错的选择。