详解Bootstrap的iCheck插件checkbox和radio

简介

iCheck是一款免费、轻量、跨浏览器的样式增强插件，它可以让复选框和单选框更美观，同时还支持各种样式主题自定义，使用较为方便，被广泛应用于UI设计和Web开发中。

安装

iCheck支持通过npm、bower等包管理工具进行安装，也可以直接下载压缩包解压到项目中。

通过npm安装

npm install icheck

通过bower安装

bower install icheck

引入

可以将iCheck的样式文件（CSS）和JavaScript文件（JS）直接引入到HTML页面中。

<!-- 引入iCheck样式文件 -->
<link rel="stylesheet" href="path/to/icheck/skins/all.css">

<!-- 引入iCheck JavaScript文件 -->
<script src="path/to/icheck/icheck.js"></script>

使用

iCheck的使用非常简单，只需要先定义一个HTML结构，然后通过jQuery或JavaScript代码调用iCheck函数即可。

<!-- 定义HTML结构 -->
<label>
  <input type="checkbox" class="icheckbox_flat-green" checked> 复选框1
</label>

<label>
  <input type="checkbox" class="icheckbox_flat-green"> 复选框2
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_flat-green" checked> 单选框1
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_flat-green"> 单选框2
</label>

// 使用iCheck函数
$('input').iCheck();

上述代码会将所有的复选框和单选框都应用iCheck样式。

自定义主题

iCheck支持自定义主题样式，可以通过配置iCheck样式文件的参数来实现。

预定义主题

iCheck提供了多个预定义的主题样式，可以直接在HTML属性中指定。

<!-- 自定义主题的HTML结构 -->
<label>
  <input type="checkbox" class="icheckbox_minimal" checked> 复选框1
</label>

<label>
  <input type="checkbox" class="icheckbox_square-green"> 复选框2
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_minimal" checked> 单选框1
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_square-green"> 单选框2
</label>

自定义主题

iCheck还支持自定义主题，可以通过修改样式文件的参数来实现，如下所示：

/* 自定义iCheck主题 */

/* 复选框 */
.icheckbox_custom-blue {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  position: relative;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #ddd;
}

.icheckbox_custom-blue:hover, .icheckbox_custom-blue:focus {
  border-color: #0b97c4;
}

.icheckbox_custom-blue.disabled, .icheckbox_custom-blue[disabled] {
  opacity: 0.5;
  cursor: default;
}

.icheckbox_custom-blue > div {
  display: none;
}

.icheckbox_custom-blue > div > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: 10px;
  font-weight: bold;
  color: #fff;
}

.icheckbox_custom-blue.checked > div {
  display: block;
}

.icheckbox_custom-blue.checked > div > div {
  width: 12px;
  height: 12px;
  background-color: #0b97c4;
  border-radius: 50%;
}

/* 单选框 */
.iradio_custom-blue {
  display: inline-block;
  vertical-align: middle;
  margin: 5px;
  position: relative;
  width: 16px;
  height: 16px;
  border: 1px solid #ddd;
  border-radius: 50%;
  background-color: #fff;
}

.iradio_custom-blue:hover, .iradio_custom-blue:focus {
  border-color: #0b97c4;
}

.iradio_custom-blue.disabled, .iradio_custom-blue[disabled] {
  opacity: 0.5;
  cursor: default;
}

.iradio_custom-blue > div {
  display: none;
}

.iradio_custom-blue > div > div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #0b97c4;
}

.iradio_custom-blue.checked {
  background-color: #0b97c4;
}

.iradio_custom-blue.checked > div {
  display: block;
}

然后在HTML结构中使用自定义的主题样式即可：

<!-- 使用自定义主题的HTML结构 -->
<label>
  <input type="checkbox" class="icheckbox_custom-blue" checked> 复选框1
</label>

<label>
  <input type="checkbox" class="icheckbox_custom-blue"> 复选框2
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_custom-blue" checked> 单选框1
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_custom-blue"> 单选框2
</label>

示例说明

示例一：预定义主题

<!-- 使用预定义主题 -->
<label>
  <input type="checkbox" class="icheckbox_square-red" checked> 勾选红色复选框
</label>

<label>
  <input type="checkbox" class="icheckbox_square-blue"> 勾选蓝色复选框
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_square-green" checked> 选中绿色单选框
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_square-yellow"> 选中黄色单选框
</label>

<!-- 引入iCheck的CSS和JS文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/icheck-bootstrap/3.0.1/icheck-bootstrap.min.js"></script>

<!-- 在页面加载后调用iCheck函数，启用iCheck样式 -->
<script>
  $(document).ready(function() {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square',
      radioClass: 'iradio_square'
    });
  });
</script>

此处使用了icheck-bootstrap的预定义主题，将iCheck的CSS和JS文件引入到页面中后，通过调用iCheck函数，将所有的复选框和单选框应用icheck-bootstrap的样式，并进行了样式的主题设置。

示例二：自定义主题

<!-- 自定义主题 -->
<label>
  <input type="checkbox" class="icheckbox_custom-blue" checked> 勾选蓝色复选框
</label>

<label>
  <input type="checkbox" class="icheckbox_custom-red"> 勾选红色复选框
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_custom-green" checked> 选中绿色单选框
</label>

<label>
  <input type="radio" name="radio-name" class="iradio_custom-orange"> 选中橙色单选框
</label>

<!-- 引入iCheck的CSS和JS文件 -->
<link rel="stylesheet" href="path/to/icheck/skins/all.css">
<script src="path/to/icheck/icheck.js"></script>

<!-- 在页面加载后调用iCheck函数，启用自定义主题 -->
<script>
  $(document).ready(function() {
    $('input').iCheck({
      checkboxClass: 'icheckbox_custom-blue',
      radioClass: 'iradio_custom-green'
    });
  });
</script>

此处使用了自定义主题，将自定义的CSS样式文件和JS文件引入到页面中后，通过调用iCheck函数，将所有的复选框和单选框应用自定义的样式，并进行了样式的主题设置。