15个最佳jQuery，JavaScript，CSS复选框和单选按钮替换插件 _单选按钮

本文概述

15. TinyToggle
14. prettyCheckable
13. iCheck Bootstrap CSS
12. Checkbox radio
11. Magic Input
10. Magic Check
9. Bootstrap Switch
8. Bootstrap Checkbox
7. Pretty Checkbox
6. Labelauty
5. Bootstrap 4 Ti-Ta-Toggle
4. jQuery Toggles
3. Bootstrap Toggle
2. iCheck
1. Switchery

如今, 视觉上令人惊叹的界面将始终是必需的, 无聊的应用程序可能不会成为用户的最爱, 对吗？作为设计师或Web开发人员, 你有责任创建易于使用但外观也不错的用户界面。对于组件具有其他样式(自定义按钮等)的应用程序, 默认复选框和单选按钮通常不是最佳选择, 因此你也不会忘记为这些组件提供酷炫的样式。
在本文中, 我们想与你分享15个最无用的基于CSS和JavaScript的插件, 以便在几秒钟内在你的Web应用程序中创建精美且漂亮的复选框, 请尽情使用！
15. TinyToggle Github

文章图片
TinyToggle是一个简单实用的插件, 用于掩盖项目中的复选框html input标签。你可以从13种不同的图标集中进行选择, 还可以根据需要自定义调色板和大小, 并使用Font Awesome等外部库进行扩展。 TinyToggle基于网络字体css, 它易于使用且易于包含在你的项目中。
14. prettyCheckable Github

文章图片
一个jQuery插件, 用于替换自定义图像的复选框和单选按钮。该插件功能：

与IE7 +, Chrome, Firefox, Safari和移动浏览器兼容；
定制设计, 由Bruno O. Barros提供；
四种颜色选项(Twitter引导程序)+可编辑的PSD；
更好的外观和尺寸；
超级容易实现；
可通过Tab键选择并通过键盘检查；
更改事件和链接保留；
点击/触摸的更多区域。适用于移动设备。

13. iCheck Bootstrap CSS Github

文章图片
iCheck-bootstrap是用于显示Twitter引导程序样式复选框和单选按钮的纯CSS解决方案。 icheck-bootstrap基于twitter引导程序样式, 因此请确保在标题中正确链接了引导程序样式表, 并使用默认的标记结构：

< div class="checkbox icheck-primary"> < input type="checkbox" id="someCheckboxId" /> < label for="someCheckboxId"> Click to check< /label> < /div>

12. Checkbox radio Github

文章图片
Checkbox Radio是由filamentgroup制作的微型jQuery插件, 用于创建逐步增强的单选按钮和复选框。
11. Magic Input Github

文章图片
Magic Input是复选框和单选按钮的CSS3样式的很棒的集合, 这些样式将仅使用一个元素和CSS即可使你的输入看起来更漂亮。
10. Magic Check Github

文章图片
Magic Check是一个很小的CSS库, 用于美化Radio和Checkbox。它支持Chrome, Firefox, Safari, Opera和IE9 +。
9. Bootstrap Switch

文章图片
将复选框和单选按钮变成切换开关。它提供对IE9 +和所有其他现代浏览器的支持。
8. Bootstrap Checkbox Github

文章图片
【15个最佳jQuery，JavaScript，CSS复选框和单选按钮替换插件】Bootstrap Checkbox是基于Bootstrap框架的非常简单易用的复选框组件。要开始使用此插件, 只需在文档中包含bootstrap-checkbox.js脚本的副本：

< !-- Include jQuery --> < script src="http://www.srcmini.com/jquery.js"> < /script> < !-- Include Copy of bootstrap-checkbox.js --> < script src="http://www.srcmini.com/dist/js/bootstrap-checkbox.js"> < /script>

用jQuery选择要在其中初始化组件的复选框元素, 然后调用checkboxpicker方法：

$(':checkbox').checkboxpicker();

就是这样, 你将立即拥有一个很棒的” 是/否” 切换, 而不是浏览器的本机复选框。
7. Pretty Checkbox Github

文章图片
Prett Checkbox是一个纯CSS库, 用于美化复选框和单选按钮, 不需要JavaScript。它具有以下特点：

基本的
- 形状-正方形, 曲线, 圆形
- 变体-默认, 填充, 粗
- 颜色-主要, 成功, 信息, 警告, 危险
- 颜色类型-单色, 轮廓
- 动画-平滑, 多田, 果冻, 脉冲, 旋转
开关-iOS样式-轮廓, 填充, 细边
反应灵敏
没有JavaScript
自定义字体图标
SVG图标
图片支持
在图标/ SVG /图像之间切换
锁
状态-焦点, 悬停, 不确定
支持框架-Bootstrap, Foundation, Sematic UI, Bulma, …
SCSS定制
支持所有现代浏览器, 包括移动设备
打印友好

6. Labelauty Github

文章图片
Labelautiy是一个非常不错的轻量级jQuery插件, 它使复选框和单选按钮具有美感, 并允许为(未)选中输入的每种状态自定义标签。要使用默认标签” 已检查” 和” 未检查” 来初始化一个复选框, 每个输入状态一个, 你可以简单地使用以下代码：

< input type="checkbox" data-labelauty="Don't synchronize files|Synchronize my files"/> < script> $(document).ready(function(){ $(":checkbox").labelauty(); }); < /script>

你可以更改默认标签(请参阅选项部分)或为每个复选框指定自定义标签。
5. Bootstrap 4 Ti-Ta-Toggle Github

文章图片
Ti-Ta-Toggle使用超棒的切换按钮, 没有Java脚本或任何其他逻辑(平面元素除外)。模式与Twitter-Bootstrap相同。因此可以轻松实现。它为以下浏览器提供支持：Internet Explorer 9/10/11, Edge, FireFox, Safari, Chrome, Safari Ios, Stock Android浏览器4.2, Chrome Android。 TitaToggle的1.0.0版本支持Bootstrap v3.x.x
4. jQuery Toggles Github

文章图片
Toggles是一个轻量级的jQuery插件, 可创建易于设置样式的切换按钮。你需要为要使用的特定主题指定类。在这种情况下, 我们使用切换现代。切换类就是我们将用作选择器的初始化类：

< div class="toggle toggle-modern">

我们可以使用的主题是：

柔软的
光
暗
苹果手机
现代

当然, 你可以编写自己的主题/调整样式。
3. Bootstrap Toggle Github

文章图片
Bootstrap Toggle是高度灵活的Bootstrap插件, 可将复选框转换为切换。首先, 将插件包含在你的项目中, 然后简单地添加data-toggle =” toggle” 属性即可将复选框转换为切换。
2. iCheck Github

文章图片
iCheck是一个高度插件, 可为jQuery和Zepto创建可自定义的复选框和单选按钮。 v2.0也即将面世, 它极大地提高了性能, 并提供了许多新选项和方法。它处于发布候选状态, 因此你可以尝试使用它。该插件提供：

跨台式机和移动设备的不同浏览器和设备上的相同输入
触摸设备支持-iOS, Android, BlackBerry, Windows Phone, Amazon Kindle
键盘可访问的输入-选项卡, 空格键, 向上/向下箭头和其他快捷键
自由自定义-使用任何HTML和CSS设置输入样式(尝试使用6种支持Retina的皮肤)
单个文件支持jQuery和Zepto JavaScript库
屏幕阅读器可访问的输入-VoiceOver等的ARIA属性
轻量级—已压缩1 kb

1. Switchery Github

文章图片
Switchery是一个简单的组件, 可帮助你通过几个简单的步骤即可将默认的HTML复选框输入转换为漂亮的iOS 7样式的开关。你可以轻松自定义开关, 以便它们与你的设计完美匹配。根据MIT许可获得许可。所有现代浏览器均支持：Chrome, Firefox, Opera, Safari, IE8 +。
如果你知道另一个开源组件可以替代浏览器的那些丑陋的默认复选框, 请在评论框中与社区共享。