javascript改变input radio的样式

最新推荐文章于 2024-07-29 14:03:25 发布

编号90015478

最新推荐文章于 2024-07-29 14:03:25 发布

阅读量2.3k

点赞数 2

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_20353887/article/details/51462646

版权

这篇博客展示了如何使用JavaScript和CSS改变HTML中的input radio元素的默认样式，实现选中状态的样式切换。通过监听label点击事件，动态地添加和移除'checked'类，以更新背景图片达到切换效果。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
    <style>
        .create_user_sex label,.create_user_state label
            {
                display:-moz-inline-block;
                display:inline-block;
                cursor:pointer;
                margin:5px 0;
                padding-left:20px;
                line-height:15px;
                background:url(/images/choice_no.png) no-repeat left top;//需要自己来添加切换的图
                font-size:16px!important;
                font-weight:100;
            }
        .create_user_sex label.checked,.create_user_state label.checked
            {
                background:url(/images/choice_yes.png) no-repeat left top;//需要自己来添加切换的图
            }


    </style>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js" type="text/javascript"></script>
    <script typ