示例-全选商品列表

示例-全选商品列表

<!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=utf-8" />
<title>示例-全选商品列表</title>
</head>

<body>
	<script type="text/javascript">
    	function getSum(){
			/*
			*获取所有名称为item的复选框
			*判断checked状态，为true表示被选中，获取该节点的value进行累加。
			*/
			var sum = 0;
			var collItemNodes = document.getElementsByName("item");
			
			for(var x=0;x<collItemNodes.length;x++){
					if(collItemNodes[x].checked){
							sum+=parseInt(collItemNodes[x].value);
						}
				}
			var sSum = sum+"元";
			
			document.getElementById("sumid").innerHTML = sSum.fontcolor("red");;
				
			}
			
			//全选
			function checkAll(node){
					/*
					*全选的box的checked状态复制给所有的itembox的checked。
					*/
					var collItemNodes = document.getElementsByName("item");
					
					for(var x=0;x<collItemNodes.length;x++){
							collItemNodes[x].checked=node.checked;
						}
				}
    </script>
    <input type="checkbox" name="allitem" onclick="checkAll(this)" />全选<br/>
	<input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
    <input type="checkbox" name="item" value="4000" />笔记本电脑：4000元<br/>
    <input type="checkbox" name="allitem" onclick="checkAll()" />全选<br/>
    <input type="button" name="item" value="总金额是" onclick="getSum()" />
    <span id="sumid"></span>
</body>
</html>

　　

全选
笔记本电脑：4000元
笔记本电脑：4000元
笔记本电脑：4000元
笔记本电脑：4000元
笔记本电脑：4000元
笔记本电脑：4000元
全选

posted @ 2014-06-11 22:29  是但哥  阅读(492)  评论(0)    收藏  举报