jquery表单元素radio和复选按钮checkbox美化特效

使用方法：

引入jQuery库文件、特效JS文件

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/prettyCheckboxes.js"></script>

引入CSS样式文件

<link rel="stylesheet" href="css/prettyCheckboxes.css" type="text/css" media="screen" />

特效初始化、参数配置

$(document).ready(function(){
    $('#checkboxDemo input[type=checkbox],#radioDemo input[type=radio]').prettyCheckboxes();
    $('.inlineRadios input[type=radio]').prettyCheckboxes({'display':'inline'});
});

HTML结构

<div id="wrap">
    <form id="checkboxDemo" action="" method="post">
        <fieldset>
            <legend>定制复选框</legend>
            
            <label for="checkbox-1" tabindex="1">项目 1</label>
            <input type="checkbox" name="checkbox-1" id="checkbox-1" value="checkbox-1" />
            <label for="checkbox-2" tabindex="2">项目 2</label>
            <input type="checkbox" name="checkbox-2" id="checkbox-2" value="checkbox-2" />
            <label for="checkbox-3" tabindex="3">项目 3</label>
            <input type="checkbox" name="checkbox-3" id="checkbox-3" value="checkbox-3" />
            <label for="checkbox-4" tabindex="4">项目 4</label>
            <input type="checkbox" name="checkbox-4" id="checkbox-4" value="checkbox-4" />
        
            <label for="checkbox-5" tabindex="5">Check all</label>
            <input type="checkbox" name="checkbox-5" id="checkbox-5" value="checkbox-5" onclick="checkAllPrettyCheckboxes(this,$('#checkboxDemo'))" />
            
            <div class="clear"></div>
            <input type="submit" value="提交内容" id="" />
        </fieldset>
    </form>
    
    <br /><br />
    <form id="radioDemo" action="" method="post">
        <fieldset>
            <legend>定制单选按钮</legend>
            <label for="radio-1" tabindex="1">项目 1</label>
            <input type="radio" name="radio-button" id="radio-1" value="radio-1" />
            <label for="radio-2" tabindex="2">项目 2</label>
            <input type="radio" name="radio-button" id="radio-2" value="radio-2" />
            <label for="radio-3" tabindex="3">项目 3</label>
            <input type="radio" name="radio-button" id="radio-3" value="radio-3" />
            <label for="radio-4" tabindex="4">项目 4</label>
            <input type="radio" name="radio-button" id="radio-4" value="radio-4" />
            <div class="clear"></div>
            <input type="submit" value="提交内容" id="" />
        </fieldset>
    </form>
    <br /><br />
    <form class="inlineRadios" action="">
        <fieldset>
            <legend>插件控制横排显示单选按钮</legend>
            <label for="radio-5" tabindex="1">项目 1</label>
            <input type="radio" name="radio-button-inline" id="radio-5" value="radio-1" />
            <label for="radio-6" tabindex="2">项目 2</label>
            <input type="radio" name="radio-button-inline" id="radio-6" value="radio-2" />
            <label for="radio-7" tabindex="3">项目 3</label>
            <input type="radio" name="radio-button-inline" id="radio-7" value="radio-3" />
            <label for="radio-8" tabindex="4">项目 4</label>
            <input type="radio" name="radio-button-inline" id="radio-8" value="radio-4" />
        </fieldset>
    </form>
</div>