Labelauty–jQuery radio button/checkbox beautification plug-in sharing

Home

Web Front-end

JS Tutorial

Labelauty–jQuery radio button/checkbox beautification plug-in sharing_jquery

May 16, 2016 pm 03:37 PM

jquery js

The example in this article describes the Labelauty–jQuery radio button/checkbox beautification plug-in, which is shared with everyone for your reference. The details are as follows:
Labelauty – jQuery radio button/checkbox beautification plug-in, a very small plug-in based on jQuery. In addition to realizing the original selected, unselected, disabled and other functions of the radio button/check box, it can also set the selected and Unselected text information, minimum width of labels, etc.
Operation rendering: ----------------------------------View the effect------- --------------------------

The specific code is as follows

&lt;head&gt;
&lt;title&gt;Labelauty–jQuery单选框/复选框美化插件&lt;/title&gt;
&lt;link rel="stylesheet" href="css/jquery-labelauty.css"&gt;
&lt;script src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;
&lt;script src="js/jquery-labelauty.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;!-- 代码 开始 --&gt;
&lt;h1&gt;jQuery单选框/复选框美化插件演示&lt;/h1&gt;
&lt;h3&gt;您的职业（单选框）&lt;/h3&gt;
&lt;ul class=""&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" data-labelauty="视觉设计师"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" data-labelauty="交互设计师"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" data-labelauty="前端工程师"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" data-labelauty="数据分析师"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="radio" name="radio" disabled data-labelauty="不可用"&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;hr&gt;

&lt;h3&gt;您擅长的技能（复选框）&lt;/h3&gt;
&lt;ul class=""&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" disabled checked data-labelauty="HTML"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="CSS"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="JavaScript"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="SEO"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="PHP"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty="JAVA"&gt;&lt;/li&gt;
 &lt;li&gt;&lt;input type="checkbox" name="checkbox" data-labelauty=".NET"&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;script&gt;
$(function(){
 $(':input').labelauty();
});
&lt;/script&gt;
&lt;!-- 代码 结束 --&gt;

&lt;div style="text-align:center;margin:50px 0"&gt;
&lt;p style="margin:20px 0"&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

I hope this article will be helpful to everyone’s jQuery programming.

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn