jQuery美化radio和checkbox

来源:https://www.sucaihuo.com/js/426.html 2015-08-21 06:38浏览(2168) 收藏

美化单选框和复选框经常在我们项目中用到,需要美化表单的朋友赶紧收藏和下载吧。本文提供了CSS中的背景图片定位来美化radio和checkbox。
jQuery美化radio和checkbox
分类:html/css > 按钮 难易:初级
查看演示 下载资源 下载积分: 20 积分

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");
        }
    }
})
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2