Radio Object

Radio 对象代表 HTML 表单中的单选按钮。

在 HTML 表单中 <input type="radio"> 每出现一次，一个 Radio 对象就会被创建。

单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。

当单选按钮被选中或不选中时，该按钮就会触发 onclick 事件句柄。

您可通过遍历表单的 elements[] 数组来访问 Radio 对象，或者通过使用 document.getElementById()。更多的是通过元素对象的name属性获取，如下：

语法：document.getElementsByName(nodeName)

表示通过name属性的值获取一组元素。该方法接受一个参数，查找名称。方法返回一个HTMLCollection对象，返回所有带有给定name属性的元素，通常用于表单单复选按钮组的获取。

单复选按钮的应用

语法：document.getElementsByName(nodeName)

单复选按钮值的获取和展示，如图所示，代码如下：

布局：

<label><input type="radio" name="gender"  value="男" checked="checked" />男</label>
<label><input type="radio" name="gender"  value="女" />女</label>
<label><input type="checkbox" name="hobby" value="足球" />足球</label>
<label><input type="checkbox" name="hobby" value="篮球" />篮球</label>
<label><input type="checkbox" name="hobby" value="乒乓球" checked="checked" />乒乓球</label>
<input type="button" value="show" onclick="show()"/>
<input type="button" value="全选" onclick="changeBoxes(1);" />
<input type="button" value="全不选" onclick="changeBoxes(0);" />
<input type="button" value="反选" onclick="changeBoxes(-1);" />
<div id="info"></div>

功能实现：

function show(){
	var oRadio= document.getElementsByName("gender"); //根据name属性获取单选按钮组 
	var s="我是";
    var info=document.getElementById("info");
    if(oRadio [0].checked==true)
    s+=oRadio[0].value;              //单选按钮组的第一个元素
    else
    s+=oRadio[1].value;
    var oCheckbox= document.getElementsByName("hobby");
    s+="生，喜欢";
    for(var i=0;i<oCheckbox.length;i++){
       if(oCheckbox[i].checked==true) 
       s+=oCheckbox[i].value+",";
       info.innerHTML=s;
   }
} 
function changeBoxes(action){//实现全选、反选、全不选效果
    var oCheckbox=document.getElementsByName("hobby");//根据name属性获取复选按钮组，再遍历每个
    for(var i=0;i<oCheckbox.length;i++){
        if(action<0) 
        oCheckbox[i].checked=!oCheckbox[i].checked;
        else oCheckbox[i].checked=action; }
}  