自定义radio,使用图片进行切换(点击切换时,获取变量值)

1.想要实现的效果是:

 

 

 

2.思路

　　隐藏原本单选框--->自定义选择框---->调整相对应样式

 

3.直接上代码

 

<!DOCTYPE html>
<html>


    <head>
        <meta charset="UTF-8">
        <title></title>
        <!-- <script type="text/javascript" src="jquery-2.1.4.min.js"></script> -->
        <style>
        .label {
            /*设置label的样式*/
            width: 100%;
            padding: 10px 0px;
            display: block;
            line-height: 20px;
            position: relative;
            font-weight: normal;
            position: relative;
        }


        .radio .option {
            /*把优化后的按钮图片设置为该div的背景图片，把该div定位到原生样式的上方，遮盖住原生样式。*/
            width: 130px;
            height: 140px;
            position: absolute;
            top: 8px;
            left: 35px;
        }


        .radio input[type="radio"] {
            /*把原生样式隐藏掉*/
            display: inline-block;
            margin-right: 15px;
            opacity: 0;
        }


        input[type="radio"]:checked+div {
            /*当radiuo被选中时，把input下边的div标签的背景图片替换掉*/
            background: url('2.png') no-repeat;
            background-size: 16% 16%;
            background-position: 105px 113px;
            border: 2px solid #ff8a00;
            border-radius: 7px;
        }
        </style>
    </head>


    <body>
        <!--HTML代码结构如下：-->
        <div style="display: flex;justify-content: center;">
            <div class="radio">
                <label class="label" style="position: relative;">
                    <input type="radio" name="sex" value="" checked/>
                    <div class="option"></div><!--该div盛放的是优化后的按钮图片-->
                    <img src="图片路径" alt="">
                </label>
            </div>
            <div class="radio">
                <label  class="label" style="position: relative;">
                    <input type="radio" name="sex" value="" />
                    <div class="option"></div><!--该div盛放的是优化后的按钮图片-->
                    <img src="图片路径" alt="">
                </label>
            </div>
        </div>
        
    </body>


</html>

 

 

4.如果想监听选择的变化(引入jQuery)

 

$('input[type=radio][name=radio_type]').change(function() {
    console.log(this.value);
});

 

 

参考链接:https://www.cnblogs.com/gxywb/p/10109513.html

 

posted @ 2020-05-19 21:04  昭z  阅读(914)  评论(0)  编辑  收藏  举报