首页 > 网络编程 > JavaScript > 表单特效 > CheckBox数组

用Javascript读取CheckBox数组的值的代码(兼容IE与firefox)

2010-12-30 14:44:54 作者：

为了同时支持Firefox和IE，我们常常用document.getElementById(id)方法来取得HTML对象。但是getElementById方法只能取得单个对象，而对于CheckBox数组则无能为力。

document.getElementsByName(name)方法正是用来读取对象数组的。用法如下：
var elements = document.getElementsByName("role");
（"role"为CheckBox数组中每个CheckBox共同的名字）
for:

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>getElementsByName范例</title> 
<script type="text/javascript"> 
function test(){ 
// 得到checkbox数组 
var elements = document.getElementsByName("role"); 
var str = ""; 
// 取得所选择的角色 
for(var i=0;i<elements.length;i++){ 
if(elements[i].checked){ 
str += "> " + elements[i].value + "\n"; 
} 
} 
// 输出 
if(str == ""){ 
alert("您没有选择任何角色！"); 
} 
else{ 
alert("您选择的角色为：\n\n" + str); 
} 
} 
</script> 
</head> 
<body> 
<table cellspacing="5" cellpadding="2" align="Center" border="1"> 
<tr> 
<td align="center" class="dgHeader" nowrap>选择角色</td> 
<td align="left"> 
系统管理员<input name="role" type="checkbox" value="系统管理员" >
 
总经理<input name="role" type="checkbox" value="总经理" >
 
代理商<input name="role" type="checkbox" value="代理商" >
 
客服人员<input name="role" type="checkbox" value="客服人员" >
 
</td> 
</tr> 
<tr> 
<td height="29" colspan="2" align="center"> 
<input type="button" id="btnSubmit" style="font-size:12px;width:90px;" value="输出选择结果" onclick="test();" /> 
</tr> 
</table> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

用Javascript读取CheckBox数组的值的代码(兼容IE与firefox)

您可能感兴趣的文章: