經(jīng)常用到單復(fù)選框，都是用了之后就丟，這次，想來(lái)整理整理它，才發(fā)現(xiàn)，原來(lái)單復(fù)選框也是可以這么美這么多功能的
第一款
它除了能夠?qū)崿F(xiàn)單選框/復(fù)選框原本的選中、未選中、禁用等功能外，還能夠設(shè)置選中和未選中的文本信息、標(biāo)簽的最小寬度
好，現(xiàn)在，我們就開(kāi)始嘩啦啦的寫(xiě)栗子了，開(kāi)門(mén)見(jiàn)山
頭部引用
<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>您喜歡的職業(yè)（單選）</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="后臺(tái)工程師"></li>
<li><input type="radio" name="radio" disabled data-labelauty="不可用"></li>
</ul>
<h3>您擅長(zhǎng)的技能（復(fù)選框）</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>
好，精彩的剛開(kāi)始，只要調(diào)用一句代碼，即可擁有這么好看的單復(fù)選框啦（下面采用 圖－調(diào)用代碼 的格式給大家展示）
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 });});
第二款
上面的還不能滿足你的需求？別虛，再來(lái)一發(fā)
Paste_Image.png
這一款，是純css3實(shí)現(xiàn)的，不需要調(diào)用，只需飲用一個(gè)css文件即可，下來(lái)，讓我來(lái)細(xì)細(xì)跟你講怎么簡(jiǎn)單用
Paste_Image.png
是不是很簡(jiǎn)單，很輕便？喜歡的可以拉下面去，下載所有代碼噢！
轉(zhuǎn)載請(qǐng)注明來(lái)自JillYu博客－http://write.blog.csdn.net/postlist
