关于radio 单选框在项目中的一些心得

如图，是一个审核题目的功能，在点击审核题目后页面改变（没有跳转到新页面），并且出现了题目类型的单选框radio 此时需要做的功能就是当用户点击选择题时，下方的信息版面会多出一个题目选项这一栏。

采用div 属性display ，当display属性为none时，该div被隐藏

思路是，默认div为隐藏，当点击radio按钮时进行控制将属性改为空，使其显示，点击其他按钮时，div重新隐藏。

遇到问题及解决方法：

1.采用自启动函数进行控制，并使用jQuery进行函数绑定，js代码如下

(

function()

{

var radios = document.getElementsByName("questions_type");

//根据 name集合长度 遍历name集合  

for(var i=0;i<radios.length;i++)  

 {   

//判断那个单选按钮为选中状态  

 if(radios[i].checked)  

 {  

 //弹出选中单选按钮的值  

alert(radios[i].value);  

 }    

}   

}()

);

上方法只是测试代码，因此只弹出选中按钮做测试，测试过后发现该方法并不能实现需要，查其原因：在刷新页面时自启动函数启动但是由于页面触发需要点击审核按钮，导致点击审核按钮之后该方法已经失效，所以无法进行改变，只好放弃该方法。

2.给radio按钮添加onclick按钮直接触发，代码如下：

  <input type="radio" name="questions_type" value="s" οnclick="a()"/>选择题
  <input type="radio" name="questions_type" value="c" οnclick="a()"/>填空题
  <input type="radio" name="questions_type" value="q" οnclick="a()"/>编程题

function a()
{
var radios = document.getElementsByName("questions_type");
//根据 name集合长度 遍历name集合  
    for(var i=0;i<radios.length;i++)  
    {   
        //判断那个单选按钮为选中状态  
        if(radios[i].checked&&radios[i].value=="s")  
        {  
            document.getElementById("question_s").style.display="";
            break;
       }else
       {
document.getElementById("question_s").style.display="none";
} 
    }   
}

该方法经测试已经可用，需要注意的是在for循环时必须加上break；否则可能会导致选择第一个时已经将题目选项栏调出来，之后进行循环时又将其属性改为隐藏导致属性被覆盖掉出现误差，其次，为何要在填空题和编程题的选项中也触发方法，是因为如果只在选择题选项中触发的话，用户点击选择题之后再点击填空题或编程题时，题目选项该栏仍然存在。

以上是我个人在项目过程中的一些小心得，希望记录下来，在以后的学习中进行积累。