单、复选款美化

经常用到单复选框，都是用了之后就丢，这次，想来整理整理它，才发现，原来单复选框也是可以这么美这么多功能的

第一款

它除了能够实现单选框/复选框原本的选中、未选中、禁用等功能外，还能够设置选中和未选中的文本信息、标签的最小宽度
好，现在，我们就开始哗啦啦的写栗子了，开门见山
头部引用

<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

代码下载：https://coding.net/u/Jill/p/dankal-jill/git