漂亮 [checkbox+radio]+label 自定义样式（jQuery ）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>

<script language="javascript" src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready( function () {
     $("div").cssRadio();
     $("div").cssCheckBox();
});
jQuery.fn.cssRadio = function () {
    $(":input[type=radio] + label").each( function(){
            if ( $(this).prev()[0].checked )
                $(this).addClass("checked");
            })
        .hover(
            function() { $(this).addClass("over"); },
            function() { $(this).removeClass("over"); }
            )
        .click( function() {
             var contents = $(this).parent().parent(); /*多组控制关键*/
            $(":input[type=radio] + label", contents).each( function() {
                $(this).prev()[0].checked=false;
                $(this).removeClass("checked");
            });
            $(this).prev()[0].checked=true;
             $(this).addClass("checked");
            }).prev().hide();
};

jQuery.fn.cssCheckBox = function () {
    $(":input[type=checkbox] + label").each( function(){
            if ( $(this).prev()[0].checked )
                {$(this).addClass("checked");}
            })
        .hover(
            function() { $(this).addClass("over"); },
            function() { $(this).removeClass("over"); }
            )
        .toggle( function()  /*不能click，不然checked无法回到unchecked*/
            {
                $(this).prev()[0].checked=true;
                 $(this).addClass("checked");
            },
            function()
            {
                $(this).prev()[0].checked=false;
                 $(this).removeClass("checked");
            }).prev().hide();
}

</script>
<style type="text/css">

</style>
</head>
<body>
<h3>Example</h3>
<form id="dx">
<P>第一组</p>
<div>
<p><input type="radio" name="radio1"/> <label>Option 1</label></p>
<p><input type="radio" name="radio1"/> <label>Option 2</label></p>
<p><input type="radio" name="radio1"/> <label>Option 3</label></p>
<p><input type="radio" name="radio1"/> <label>Option 4</label></p>
</div>
<P>第二组</p>
<div>
<p><input type="radio" name="radio2"/> <label>Option 1</label></p>
<p><input type="radio" name="radio2"/> <label>Option 2</label></p>
<p><input type="radio" name="radio2"/> <label>Option 3</label></p>
<p><input type="radio" name="radio2"/> <label>Option 4</label></p>
</div>
</form>

<div id="tt">
<p>第一组></p>
    <div>
    <p><input id="CheckBox1" type="checkbox"  name="clb1" /><label >Checkbox 1</label></p>
    <p><input id="CheckBox2" type="checkbox"  name="clb1" /><label >Checkbox 2</label></p>
    </div>
<p>第二组></p>
    <div>
    <p><input id="CheckBox3" type="checkbox"  name="clb2"/><label >Checkbox 3</label></p>
    <p><input id="CheckBox4" type="checkbox" name="clb2"/><label >Checkbox 4</label></p>
    </div>
</div>

</body>
</html>