用Div做到单选按钮radio自定义样式功能

这是在jsp中纯用CSS+javascript+Div打造可以自定义样式的Radio功能。

原因：

1. 不想用自带的radio 的样式，也就是那个圆圈或方框
2. 使用label将input type=”radio”时，lable的宽度不好设置。当把label的display设置为inline-block或者block时，可以设置它的宽度了，但里面的文字会靠左，不能居中又是个问题。 也要保证radio的value和label的id一致
   想用这个的话如下： (一开始的话要默认有一个选中的话需要将其背景先设为点中的背景。。)
   <label id="1" class="样式类"><input id="rad" type="radio" name="rad" value="1" onclick="bgc()">按钮</label >
   javascript里的方法

 function bgc(){
     /* 得到所有name为rad的标签对象  遍历*/
    var radioSel = document.getElementsByName("rad");
    for(var i=0;i<radioSel.length;i++){
        var i_obj = radioSel[i];
        /* 判断是否点击了改变背景色*/
        if(i_obj.checked){
            document.getElementById(i_obj.value).style.backgroundColor="#7111FF";
        }else{
            document.getElementById(i_obj.value).style.backgroundColor="#00FFFF";
        }
    } } 

下面就是我用div来做成radio效果的代码了、、

    <div id="1" class="rad_la" onclick="bgc(1)">1</div>
    <div id="2" class="rad_la" onclick="bgc(2)">2</div>
    <div id="3" class="rad_la" onclick="bgc(3)">3</div>

注意id和传入的值要一致。
然后样式：rad_la是我想要得到按钮的样子。

<style>
.rad_la{
  position:relative;
  border:2px solid #f00;
  border-radius: 8px;
  text-align:center;
  line-height:30px;
  width:100px;
  margin:10px auto;
  height:30px;
}
.rad_la:hover {
  background-color:#00f;
} 
</style>

div里的属性 margin：0px auto 是为了让这个div居中设置
最重要的是javascript,我用的是先得到这个jsp中所有的div标签，然后根据传入的值和div的id相匹配得到我所点击中的div，然后改变背景色。

function bgc(va){
   /* 得到所有的div标签  遍历*/
   var divs = document.getElementsByTagName("div");
    for(var i=0;i<divs.length;i++){
     var d=divs[i];
     if(va== d.id){
       /* 点击后的背景*/
       d.style.backgroundColor="#0f0";
       }else{
       d.style.backgroundColor="";
       }
    }
}

这个方法可能会造成效率问题，特别是jsp中有很多很多div时，，，

如果有好的方法请留言、、、谢谢！