在客户端遍历复选按钮的方法
相关技巧为，把复选按钮的name属性值写成同一个值，然后在js中获取一个数组。当复选按钮被选中的时候，所选按钮的checked属性值为true.以下为实例代码：
此处为html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<form id="f1" name="f1" method="post" action="">
<table width="80%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="28%" rowspan="5">爱好</td>
<td width="72%"><input name="cklove" type="checkbox" id="cklove" value="读书" />
读书</td>
</tr>
<tr>
<td><input name="cklove" type="checkbox" id="cklove" value="上网" />
上网</td>
</tr>
<tr>
<td><input name="cklove" type="checkbox" id="cklove" value="游泳" />
游泳</td>
</tr>
<tr>
<td><input name="cklove" type="checkbox" id="cklove" value="跑步" />
跑步</td>
</tr>
<tr>
<td><input type="button" name="Submit" value="全选" onclick="CheckedAll()" />
<input type="button" name="Submit2" value="反选" onclick="CheckedPart()"/> <input type="button" name="Submit3" value="测试" onclick="GetLove()"/></td>
</tr>
</table>
</form>
</body>
</html>
对应的js为：
<script language="javascript">
function GetLove()
{
var ck=document.forms[0].cklove;
var str="";
//通过循环判断被选中的复选框
for(var i=0;i<ck.length;i++)
{
if(ck[i].checked==true)
{
//str+=ck[i].value+"\t";
str=str+ck[i].value+"\t";
}
}
alert("你的爱好是:"+str);
}
//实现复选框的全选功能
function CheckedAll()
{
var ck=document.all.cklove;
for(var i=0;i<ck.length;i++)
{
ck[i].checked=true;
}
}
//实现复选框的反选功能
function CheckedPart()
{
var ck=document.all.cklove;
for(var i=0;i<ck.length;i++)
{
if(ck[i].checked==true)
{
ck[i].checked=false;
}
else
{
ck[i].checked=true;
}
}
}
</script>
此处还可以对此程序进行一个扩展，用来做一个数据汇总的功能。比如说选择了对应的商品及输入商品的数量，当点击确定按钮的时候计算总金额，实例代码如下：
html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>价格汇总</title>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="80%" border="1" cellspacing="1" cellpadding="1">
<tr>
<td width="31%" rowspan="2"> </td>
<td width="69%"><input name="ck" type="checkbox" id="ck" value="1.2" />
西红柿 单价：1.2元/斤
<input name="ck" type="checkbox" id="ck" value="2.4" />
茄子 单价：2.4元/斤
<input name="ck" type="checkbox" id="ck" value="2" />
青菜 单价：2元/斤
<input name="ck" type="checkbox" id="ck" value="1.5" />
土豆 单价：1.5元/斤
<input name="ck" type="checkbox" id="ck" value="0.5" />
白菜 单价：0.5元/斤</td>
</tr>
<tr>
<td><input type="button" name="Submit" value="购买" onclick="Compute()" /> <input name="txtTotal" type="text" id="txtTotal" /></td>
</tr>
</table>
</form>
</body>
</html>
对应的js代码为:
<script type="text/javascript">
function Compute()
{
var price=0;
//获取复选框的数组(获取所有复选框)
var ckArr=document.all.ck;
//通过循环判断选中的复选框
for(var i=0;i<ckArr.length;i++)
{
if(ckArr[i].checked==true)
{
//使用parseFloat()这个函数把值转换为浮点型
price+=parseFloat(ckArr[i].value);
}
}
document.getElementById("txtTotal").value="总金额：￥"+price.toFixed(2);
}
</script>
注意：在ff中不支持document.all属性，需要按照document.formName.elementName的方式方能获取到相关元素。
