DOM19---全选商品列表

最新推荐文章于 2024-06-11 11:55:45 发布

onyas

最新推荐文章于 2024-06-11 11:55:45 发布

阅读量947

点赞数

分类专栏： DOM 文章标签： DOM19---全选商品列表

本文链接：https://blog.csdn.net/zheng0518/article/details/9070243

版权

DOM 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

如图所示：

代码如下：

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=GBK">
		<link rel="stylesheet" type="text/css" href="table.css">
		<title></title>
		<style type="text/css">
		</style>
		<script type="text/javascript">
			function getSum()
			{
				/*
					获取所有名称为item的复选框，判断checked状态，为true表示被先中，
					获取该节点的value进行累加
				*/
				var sum = 0;
				var collItemNodes = document.getElementsByName("item");
				for(var i=0;i<collItemNodes.length;i++)
				{
					if(collItemNodes[i].checked)
					{
						sum += parseInt(collItemNodes[i].value); 
					}
				}
				var sSum = sum+"元";
				document.getElementById("sumid").innerHTML = sSum.fontcolor('red');
			}
			//全选
			function checkAll(node)
			{
				/*
					遍历所有的选项,然后把它们的选中状态设置成与全选按钮一样的状态就可以
				*/
				var collItemNodes = document.getElementsByName("item");
				for(var i=0;i<collItemNodes.length;i++)
				{
					collItemNodes[i].checked = node.checked;
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" name="allitem" οnclick="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="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="button" value="总金额是" οnclick="getSum()"/><span id="sumid"></span>
	</body>
</html>

onyas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM19---全选商品列表

如图所示：代码如下： function getSum() { /* 获取所有名称为item的复选框，判断checked状态，为true表示被先中，获取该节点的value进行累加 */ var sum = 0; var collItemNodes = docu
复制链接

扫一扫