前言
iCheck 是一个 jQuery 插件，用于美化和自定义 checkbox 和 radio 按钮。有很多开发人员，特别是前端开发人员，很喜欢使用它来改善用户体验。本文将介绍如何使用 npm 包 icheck，以及如何将其应用到你的项目中。
安装 icheck
在开始使用 icheck 之前，需要先安装它。使用 npm 命令来安装 icheck。
npm install icheck
引用 icheck
安装完成后，在页面中引用 icheck css 和 js 文件。
<link rel="stylesheet" href="./node_modules/icheck/skins/all.css" /> <script src="./node_modules/icheck/icheck.min.js"></script>
初始化 icheck
在页面中引用 css 和 js 文件之后，可以使用以下代码来初始化 icheck。
$(document).ready(function(){
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});这里要注意的是，如果你只想为一组 checkbox 或 radio 按钮使用 icheck，则应该给它们的所有 input 添加相同的 class，然后在初始化时指定该 class。
icheck 的可选参数
在初始化 icheck 时，可以使用以下可选参数。
- checkboxClass ：指定 checkbox 的样式，有八种预设样式可选，分别为 icheckbox_square，icheckbox_square-red，icheckbox_square-blue，icheckbox_square-green，icheckbox_square-orange，icheckbox_square-yellow，icheckbox_square-pink 和 icheckbox_square-grey。
- radioClass ：指定 radio 的样式，有八种预设样式可选，分别为 iradio_square，iradio_square-red，iradio_square-blue，iradio_square-green，iradio_square-orange，iradio_square-yellow，iradio_square-pink 和 iradio_square-grey。
- increaseArea ：指定增加点击区域的大小，默认为 '20%'。
示例代码
下面是一个完整的示例代码，可供参考。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------- ------------
----- ---------------- ------------------------------------------ --
------- -------------------------------------------------------------------
------- ---------------------------------------------------
--------
-----------------------------
-------------------
-------------- ------------------------
----------- ---------------------
------------- ----- -- --------
---
---
---------
-------
------
---------- ---------
-------
------ --------------- ---------------- --
-------- -
--------
-------
------ --------------- ---------------- --
-------- -
--------
--- --
-------
------ ------------ ------------- --
----- -
--------
-------
------ ------------ ------------- --
----- -
--------
-------
-------结语
通过本文，你已经学会了如何在项目中使用 npm 包 icheck，并可以自定义和美化 checkbox 和 radio 按钮。如果你在项目中遇到了难题，可以参考官方文档或相关社区，以获取更多支持和帮助。祝大家使用愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/57718