jQuery美化radio和checkbox_html/css_按钮_美化_复选框

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

淘建站为您提供更多_html/css_按钮_美化_复选框，在此特别感谢您对我们的支持与厚爱！

查看演示

演示不了，点击反馈

加入收藏

下载 76 次

打赏作者

觉得不错，可打赏下作者

下载资源

免费共享

特别说明：本站资源来自网友发布分享，仅供学习与参考，请勿用于商业用途，若有侵权请联系删除(272966172@qq.com)。

举报/反馈

分类：html/css > 按钮难易程度：初级

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