改变单选按钮radio圆点的颜色

最新推荐文章于 2025-06-20 23:44:18 发布

转载最新推荐文章于 2025-06-20 23:44:18 发布 · 7.9k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/zhangxuman/blog/738909

文章标签：

#javascript #python #java #ViewUI

本文介绍了一种利用HTML和jQuery实现的性别选择器样式。通过CSS定义样式，并结合jQuery处理点击事件，使得用户可以直观地选择性别。该选择器在网页上呈现为两个图标，用户点击时图标会变化以显示当前选中状态。

2019独角兽企业重金招聘Python工程师标准>>>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <style>
            .pay_list_c1,.pay_list_c2 {
                width: 24px;
                height: 18px;
                float: left;
                padding-top: 3px;
                cursor: pointer;
                text-align: center;
                margin-right: 10px;
                background-image: url(inputradio.gif);
                background-repeat: no-repeat;
                background-position: -24px 0;
                }
                .radioclass {
                opacity: 0;
                cursor: pointer;
                -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
                filter: alpha(opacity=0);
                }
                .on {
                background-position: 0 0;
            }
        </style>
    </head>
    <body>
    <div>
        <span class="pay_list_c1 on">
            <input type="radio" checked="checked" name="paylist" class="radioclass">男
        </span>
        <span class="pay_list_c2">
            <input type="radio"  name="paylist" class="radioclass">女
        </span>
    </div>
    
    </body>
    <script>
        $(".pay_list_c2").on("click",function(){
          $(this).addClass("on").siblings().removeClass("on");
        })  
        $(".pay_list_c1").on("click",function(){
          $(this).addClass("on").siblings().removeClass("on");
        })     
    </script>
</html>

效果图： pic: