javaScript 美化radio

模拟radio 效果

实现插件效果可以复制，不会相互影响

css样式

.radio label{padding: 10px 5px;display: inline-block;cursor: pointer;}
.radio label span{width: 12px;height: 12px;display: inline-block;float: left;border-radius: 50%;border: 1px solid #9c9;}
.radio label p{float: left;line-height: 14px;font-size: 14px;padding: 0;margin: 0 0 0 12px;}
.radio label .xzl{width: 4px;height: 4px;border-width: 5px;border-color: #4b4;}
.radio label .ye{color: #4b4;}

html 代码

<div class="radio">
    <label name="label">
        <span></span>
        <p>148</p>
    </label>
    <label name="label">
        <span></span>
        <p>256</p>
    </label>
    <label name="label">
        <span></span>
        <p>379</p>
    </label>
    <label name="label">
        <span></span>
        <p>425</p>
    </label>
</div>
<script>
    var rad= document.getElementsByClassName("radio");
    for(var i=0;i<rad.length;i++){
        var lab=rad[i].getElementsByTagName("label");
        for(var j=0;j<lab.length;j++){
            lab[j].onclick=function(){
                //清除所有选中
                var _rad=this.parentNode;
                var _lab=_rad.getElementsByTagName('label');
                for(var x=0;x<_lab.length;x++){
                    _lab[x].children[0].className="";
                    _lab[x].children[1].className="";
                }
                this.children[0].className="xzl";
                this.children[1].className="ye";
            }
        }
    }
</script>

在复制模块的时候，不同模块会相互影响，是因为清除选中的对象出错；