相关技巧为,把复选按钮的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 /></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 /></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的方式方能获取到相关元素。