经常用到单复选框，都是用了之后就丢，这次，想来整理整理它，才发现，原来单复选框也是可以这么美这么多功能的
第一款
它除了能够实现单选框/复选框原本的选中、未选中、禁用等功能外，还能够设置选中和未选中的文本信息、标签的最小宽度
好，现在，我们就开始哗啦啦的写栗子了，开门见山
头部引用
<script src="source/jquery-1.8.3.min.js"></script>
<script src="source/jquery-labelauty.js"></script>
<link rel="stylesheet" type="text/css" href="source/styles.css">
<link rel="stylesheet" type="text/css" href="source/jquery-labelauty.css">
栗子html主要代码
<h3>您喜欢的职业（单选）</h3>
<ul class="dk-setText">
<li><input type="radio" name="radio" data-labelauty="安卓工程师"></li>
<li><input type="radio" name="radio" data-labelauty="iOS工程师"></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>
<h3>您擅长的技能（复选框）</h3>
<ul class="dk-setText">
<li><input type="checkbox" name="checkbox" disabled checked data-labelauty="HTML5"></li>
<li><input type="checkbox" name="checkbox" data-labelauty="CSS3"></li>
<li><input type="checkbox" name="checkbox" data-labelauty="JavaScript"></li>
<li><input type="checkbox" name="checkbox" data-labelauty="jquery"></li>
<li><input type="checkbox" name="checkbox" data-labelauty="vue.js"></li>
<li><input type="checkbox" name="checkbox" data-labelauty="node.js"></li>
<li><input type="checkbox" name="checkbox" data-labelauty="angular.js"></li>
</ul>
好，精彩的刚开始，只要调用一句代码，即可拥有这么好看的单复选框啦（下面采用 图－调用代码 的格式给大家展示）
Paste_Image.png
$(function(){ $('.dk-setText input').labelauty();});
Paste_Image.png
$(function(){ $('.dk-setLabel input').labelauty({ label: false });});
Paste_Image.png
$(function(){ $(".dk-setIcon input").labelauty({ icon: false });});
Paste_Image.png
$(function(){ $(".dk-separator input").labelauty({ separator: "-" });});
Paste_Image.png
$(function(){ $(".dk-setId input").labelauty({ force_random_id: true});});
Paste_Image.png
$(function(){ $(".dk-setDelabel input").labelauty({ checked_label: "你选择了它", unchecked_label: "我不想要它" });});
Paste_Image.png
$(function(){ $(".dk-minimum input").labelauty({ minimum_width: "40px" });});
Paste_Image.png
$(function(){ $(".dk-same input").labelauty({ same_width: true });});
第二款
上面的还不能满足你的需求？别虚，再来一发
Paste_Image.png
这一款，是纯css3实现的，不需要调用，只需饮用一个css文件即可，下来，让我来细细跟你讲怎么简单用
Paste_Image.png
是不是很简单，很轻便？喜欢的可以拉下面去，下载所有代码噢！
转载请注明来自JillYu博客－http://write.blog.csdn.net/postlist
