icheck单选框_UI设计：使用iCheck自定义复选框和单选输入

在上一篇文章中，我们向您展示了如何使用CSS定制复选框和单选输入 。 但是，这种技术的一个限制是浏览器兼容性。 该效果将不会出现在Internet Explorer 8和早期IE版本中，因为在那些浏览器中不支持:checked伪类。 因此，它并不是每种情况下的理想选择。

今天，我们将探索另一条使用名为iCheck的jQuery插件实现相似结果的途径 。

基本用法

要运行iCheck ，我们需要jQuery 1.6或更高版本，并且在将这些库包含在HTML文档中后，添加此行以初始化插件功能。

$('input').iCheck();

iCheck将搜索每个单radio和checkbox ，并将它们包装在<div>元素中。 其他输入元素（如text和textarea将被忽略。

<div class="iradio">
	<input type="radio" id="radio">
</div>
<div class="icheckbox">
	<input type="checkbox" id="checkbox">
</div>

此外，iCheck还将在某些条件下（例如hover ， checked和focus将类添加到包装器<div> ，如下所示：

<div class="iradio checked hover">
	<input type="radio" id="radio">
</div>
<div class="icheckbox checked">
	<input type="checkbox" id="checkbox">
</div>

至此，您可以使用样式表中的这些类来自定义输入“外观”。

皮肤

好吧，并不是所有人都擅长CSS。 幸运的是， iCheck的作者提供了几种美丽的皮肤，并提供了一组颜色供您选择。 以下屏幕截图显示了我最喜欢的方形皮肤。

皮肤与可下载的软件包一起提供。 要使用，只需在文档中链接适当的样式表即可。 以Square皮肤为例，可以如下添加样式表：

<link rel="stylesheet" href="css/square/orange.css">

将样式表名称替换为所提供的样式表名称，例如blue.css ， pink.css和red.css，以更改颜色。 最重要的是，这些皮肤都适合视网膜使用，这意味着它在普通和高分辨率屏幕上看起来都很棒。

进一步定制

对于更高级的用户，您可以使用提供的选项来自定义iCheck生成的标记。 假设您只想选择和定制radio输入，可以使用handle选项指定它，如下所示。

$('input').iCheck({
	handle: 'radio'
});

icheckbox和iradio是div包装器中提供的默认类。 但是，我们可以使用checkboxClass和radioClass将此类更改为其他类。 这是一个例子：

$('input').iCheck({
	checkboxClass: 'mycheckbox',
	radioClass: 'myradio'
});

如果这些还不够，您可以使用以下方法进一步自定义输入状态（例如hover ， checked ， focus等）的输出类：

• checkedClass
• disabledClass
• hoverClass
• focusClass

对我来说，这些选项的默认值很好，我认为使用它不需要做很多更改。

最终思想

正如我们在本文前面提到的那样，CSS技术可能不是您最好的解决方案，尤其是在考虑到较旧的浏览器的情况下。 因此，使用jQuery插件可能是更好的选择。 总而言之，iCheck是一个很棒的jQuery插件，具有几个易于使用且美观的外观，可自定义的选项以及轻巧的外观 。

那么，对于这样的插件，我们还能要求什么呢？ 前往官方页面查看它的运行情况： iCheck 。

翻译自: https://www.hongkiat.com/blog/jquery-icheck/