jQuery美化radio和checkbox

收藏

美化单选框和复选框经常在我们项目中用到，需要美化表单的朋友赶紧收藏和下载吧。本文提供了CSS中的背景图片定位来美化radio和checkbox。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

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");
        }
    }
})