radio圆框变方框

<html>
<head>
<style>
    .radio{
        top: 12px;
        position: absolute;
        background-image: url("./icon.png");
        background-color: #00A5E3;
        width: 18px;
        height: 18px;
        background-position: -1px -260px;
        background-repeat: no-repeat;

    }
    .radioavtive{
        background-position: -77px -260px;
    }
    .box{
        display: flex;
    }
    .box input{
        z-index: 10;
    }
style>
head>
<body>



<div class="box">
    性别:
    <div>
        <div class="radio" id="sex">
        div>
        <input style="opacity: 0" type="radio" name="sex" value="1" onclick="show(0)">div>
    <div >
        <div class="radio" style="">
        div>
        <input style="opacity: 0" type="radio" name="sex" value="1" onclick="show(1)">div>
div>






body>
<script>
    function show(type)
    {
        // alert(1);

        var item = document.getElementsByClassName('radio')
        console.log(item)
        item[0].className = "radio"
        item[1].className = "radio"
        item[type].className = "radio radioavtive"
        // item.setAttribute("class","rediocheck");
    }

script>
html>

效果:

radio圆框变方框_第1张图片

附件图片:
radio圆框变方框_第2张图片

你可能感兴趣的:(tp5常用功能)