jQuery实现美化版的单选框和复选框 radio 、 checkbox【源码下载】

jQuery实现美化版的单选框和复选框 radio 、 checkbox【源码下载】_第1张图片

 

 

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>

源码下载

 http://files.cnblogs.com/files/shimily/jquery-pretty-radio-checkbox.rar

转载于:https://www.cnblogs.com/shimily/articles/6971278.html

你可能感兴趣的:(jQuery实现美化版的单选框和复选框 radio 、 checkbox【源码下载】)