javascript改变input radio的样式

最新推荐文章于 2024-10-09 10:13:28 发布

编号90015478

最新推荐文章于 2024-10-09 10:13:28 发布

阅读量2.3k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/qq_20353887/article/details/51462646

javascript 专栏收录该内容

41 篇文章

订阅专栏

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

<!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 type="text/javascript" defer="defer">
        
        $(document).ready(function(){
           var labels = document.getElementById('create_user_sex_rig').getElementsByTagName('label');
            var radios = document.getElementById('create_user_sex_rig').getElementsByTagName('input');
            var i,j,k,l;
            for(i=0,j=labels.length ; i<j ; i++) {
                labels[i].onclick = function () {
                    if (this.className == '') {
                        for (k = 0, l = labels.length; k < l; k++) {
                            labels[k].className = '';
                            radios[k].checked = false;
                        }
                        this.className = 'checked';
                        try {
                            document.getElementById(this.name).checked = true;
                        } catch (e)
                        {


                        }
                    }
                }
            };
        });
    </script>
</head>
<body>
  <div class="create_user_sex">
        <p class="left create_user_sex_left">性别</p>
        <span id="create_user_sex_rig" class="left create_user_sex_rig">
            <input name="create_user_sex_choice" id="create_user_sex_choice_yes" type="radio" value="" >
            <label for="create_user_sex_choice_yes" name="sex_male">男</label>
            <input name="create_user_sex_choice" id="create_user_sex_choice_no" type="radio"  value="" >
            <label for="create_user_sex_choice_no" name="create_user_sex_choice">女</label>


        </span>
    </div>
</body>
</html>