radios组件

最新推荐文章于 2024-03-20 11:18:12 发布

转载最新推荐文章于 2024-03-20 11:18:12 发布 · 62 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/agosto/p/5058095.html

myRadio .css

*{padding: 0;margin:0;}
span{background: url(images/no.gif) no-repeat;padding-left: 20px;}
.active{background: url(images/yes.gif) no-repeat;padding-left: 20px;}   
input[type=radio]{display: none;}


myRadio .js

(function (){
    var addLink=false;
    window.myRadio=function (aInp)
    {
        if (!addLink)
        {
            addLink=true;
            var oLink=document.createElement('link');
            oLink.href='myRadio.css';
            oLink.rel='stylesheet';
            var oHead=document.getElementsByTagName('head')[0];
            oHead.appendChild(oLink);
        }


        var aSpan=[];
        for (var i=0; i<aInp.length; i++)
        {
            var oSpan=document.createElement('span');
            oSpan.innerHTML=aInp[i].getAttribute('data-tit');
            aSpan.push(oSpan);
            aInp[i].parentNode.insertBefore(oSpan,aInp[i]);

            if (aInp[i].checked)
            {
                aSpan[i].className='active';
            }
        }
        for (var i=0; i<aSpan.length; i++)
        {
            (function (index){
                aSpan[i].onclick=function (){
                    for (var i=0; i<aSpan.length; i++)
                    {
                        aSpan[i].className='';
                    }
                    aSpan[index].className='active';
                    aInp[index].checked=true;
                };
            })(i);   
        }
    }

})();

radios.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
    <title>agosto</title>
<style>
</style>
</head>
<script src="myRadio.js"></script>
<script>
window.onload=function (){
    var sex=document.getElementsByName('sex');
    var blod=document.getElementsByName('blod');
    myRadio(sex);
    myRadio(blod);
};
</script>
<body>
    <form action="test.html" method="get">
        <!-- <span class="active">男</span>
        <span>女</span> -->
        <input type="radio" name="sex" value="male" checked data-tit="男"/>
        <input type="radio" name="sex" value="female" data-tit="女"/>
        <input type="submit" value="提交"/>
        <hr/>
        <input type="radio" name="blod" value="o" checked data-tit="O型" />
        <input type="radio" name="blod" value="B"  data-tit="B型" />
        <input type="radio" name="blod" value="A"  data-tit="A型" />
        <input type="radio" name="blod" value="AB"  data-tit="AB型" />   
        <input type="submit" value="提交" />

    </form>   
</body>
</html>

转载于:https://www.cnblogs.com/agosto/p/5058095.html