jQuery实现美化版的单选框和复选框radio、checkbox【源码下载】
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>jQuery实现美化版的单选框和复选框DEMO演示</title> <link rel="stylesheet" href="css/jquery-labelauty.css"> <style> ul { list-style-type: none;} li { display: inline-block;} li { margin: 10px 0;} input.labelauty + label { font: 12px "Microsoft Yahei";} </style> </head> <body> <center> <h1>jQuery单选框跟复选框美化代码演示</h1> <h3>您的职业（单选框）</h3> <ul class="dowebok"> <li><input type="radio" name="radio" data-labelauty="视觉设计师"></li> <li><input type="radio" name="radio" data-labelauty="交互设计师"></li> <li><input type="radio" name="radio" data-labelauty="前端工程师"></li> <li><input type="radio" name="radio" data-labelauty="数据分析师"></li> <li><input type="radio" name="radio" disabled data-labelauty="不可用"></li> </ul> <hr> <h3>您擅长的技能（复选框）</h3> <ul class="dowebok"> <li><input type="checkbox" name="checkbox" disabled checked data-labelauty="HTML"></li> <li><input type="checkbox" name="checkbox" data-labelauty="CSS"></li> <li><input type="checkbox" name="checkbox" data-labelauty="JavaScript"></li> <li><input type="checkbox" name="checkbox" data-labelauty="SEO"></li> <li><input type="checkbox" name="checkbox" data-labelauty="PHP"></li> <li><input type="checkbox" name="checkbox" data-labelauty="JAVA"></li> <li><input type="checkbox" name="checkbox" data-labelauty=".NET"></li> </ul> <script src="js/jquery-1.8.3.min.js"></script> <script src="js/jquery-labelauty.js"></script> <script> $(function(){ $(':input').labelauty(); }); </script> </center> </div> </body> </html>
源码下载
https://files.cnblogs.com/files/shimily/jquery-pretty-radio-checkbox.rar
原文链接：https://www.cnblogs.com/shimily/articles/6971278.html
本文来源 爱码网，其版权均为 原网址 所有 与本站无关，文章内容系作者个人观点，不代表 本站 对观点赞同或支持。如需转载，请注明文章来源。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
相关文章
B站导航 ，集网址、资源、资讯于一体的 综合网址导航站，简约优雅的设计风格，全面的前端用户功能，简单的模块化配置，欢迎您的体验