Radio Object
Radio 对象代表 HTML 表单中的单选按钮。
在 HTML 表单中 <input type="radio">
每出现一次,一个 Radio 对象就会被创建。
单选按钮是表示一组互斥选项按钮中的一个。当一个按钮被选中,之前选中的按钮就变为非选中的。
当单选按钮被选中或不选中时,该按钮就会触发 onclick 事件句柄。
您可通过遍历表单的 elements[] 数组来访问 Radio 对象,或者通过使用 document.getElementById()
。更多的是通过元素对象的name属性获取,如下:
语法:document.getElementsByName(nodeName)
表示通过name属性的值获取一组元素。该方法接受一个参数,查找名称。方法返回一个HTMLCollection对象,返回所有带有给定name属性的元素,通常用于表单单复选按钮组的获取。
单复选按钮的应用
语法:document.getElementsByName(nodeName)
表示通过name属性的值获取一组元素。该方法接受一个参数,查找名称。方法返回一个HTMLCollection对象,返回所有带有给定name属性的元素,通常用于表单单复选按钮组的获取。
单复选按钮值的获取和展示,如图所示,代码如下:
布局:
<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; }
}