jQuery CSS3自定义美化Checkbox实现代码(jquery有自定义选择器吗)

推荐整理分享jQuery CSS3自定义美化Checkbox实现代码(jquery有自定义选择器吗)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery自定义函数,自定义jquery插件如何调用,jquery 设置css,jquery自定义的方法有哪些,jquery设置自定义属性,jquery设置自定义属性,jquery自定义的方法有哪些,jquery自定义的方法有哪些,内容如对您有帮助，希望把文章链接给更多的朋友！

效果图：

是不是比默认的好看多了，个人的审美观应该还是可以的。

接下来我们一起来看看实现这款美化版Checkbox的源代码，主要思路是利用隐藏原来的checkbox和radiobox，用一个div来模拟checkbox/radiobox，并使用jQuery来完成选择切换时的动画效果。

先来看看HTML代码：

然后我们用jQuery代码来为每一个checkbox和radiobox创建一个div，这个div的classname为check-box和radio-btn。

$("input[name="radio-btn"]").wrap("<div class="radio-btn"><i></i></div>");$("input[name="check-box"]").wrap("<div class="check-box"><i></i></div>");

那么我们接下来要让原来的checkbox隐藏，同时设置模拟div的样式：

上面这段CSS3代码就是用样式来自定义div，让div的样式和checkbox和radiobox一样。

最后我们来模拟点击选中和取消选中，这部分也是用jQuery来实现：