示例-全选商品列表

最新推荐文章于 2023-03-15 23:05:55 发布

weixin_30326745

最新推荐文章于 2023-03-15 23:05:55 发布

阅读量123

点赞数

CC 4.0 BY-SA版权

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/aineko/p/3782886.html

本文介绍了一个简单的HTML页面实现方案，通过使用JavaScript来计算多个复选框所代表的商品总价，并提供全选功能。该示例适用于初学者了解如何在网页上进行基本的交互式总价计算。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

示例-全选商品列表

<!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元
全选

转载于:https://www.cnblogs.com/aineko/p/3782886.html