HTML

单选按钮radio

<div class="per">
    <label>性别：</label>
    <span class="per_form">
        <span class="span_radio checked">
            <input type="radio" checked="checked" name="paylist" value="0" class="radioclass" autocomplete="off"/>   
        </span> 男
    </span>
    <span class="per_form">
        <span class="span_radio">
            <input type="radio"  name="paylist" value="1" class="radioclass" autocomplete="off"/>   
        </span> 女
    </span>
</div>

多选框checkbox

<div class="per">
    <label>科目：</label>
    <span class="per_form">
        <span class="span_checkbox checked">
            <input name="need_inv" type="checkbox" checked="checked" class="radioclass input" value="0" autocomplete="off"/> 
        </span>语文
    </span>
    <span class="per_form">
        <span class="span_checkbox checked">
            <input name="need_inv" type="checkbox" checked="checked" class="radioclass input" value="1" autocomplete="off"/> 
        </span>数学
    </span>
    <span class="per_form">
        <span class="span_checkbox">
            <input name="need_inv" type="checkbox"  class="radioclass input" value="2" autocomplete="off"/> 
        </span>英语
    </span>
</div>

CSS美化单选框radio和复选框checkbox

.span_radio{width: 24px; height: 18px; cursor: pointer; background: url(images/radio.gif) -24px 0 no-repeat; display: inline-block} .radioclass{opacity: 0; cursor: pointer; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0);} .span_radio.checked{background-position: 0 0;} .span_checkbox{width: 20px; height: 20px; cursor: pointer; background: url(images/checkbox.gif) 0 0 no-repeat;} .span_checkbox.checked{background-position: 0 -21px;}

jQuery

$(".per_form").click(function() {
    if ($(this).children("span").hasClass("checked")) {
        $(this).children("span").removeClass("checked");
        $(this).find("input").removeAttr("checked");

    } else {
        $(this).children("span").addClass("checked");
        $(this).find("input").attr("checked", "checked");
        var type = $(this).find("input").attr("type");
        if (type == 'radio') {
            $(this).siblings("span.per_form").children("span").removeClass("checked");
            $(this).siblings("span.per_form").find("input").removeAttr("checked");
        }
    }
})