位置: 编程技术 - 正文
jQuery CSS3自定义美化Checkbox实现代码(jquery有自定义选择器吗)
发布时间：2024-02-27推荐整理分享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来实现：
标签: jquery有自定义选择器吗
本文链接地址:https://www.jiuchutong.com/biancheng/386554.html 转载请保留说明！
