DOM（二）-13-(示例-全选商品列表)

最新推荐文章于 2021-05-06 19:47:51 发布

wy_0928

最新推荐文章于 2021-05-06 19:47:51 发布

阅读量385

点赞数

分类专栏： No.7-JavaWeb自学笔记（五）——DOM

本文链接：https://blog.csdn.net/wy_0928/article/details/47810897

版权

No.7-JavaWeb自学笔记（五）——DOM 专栏收录该内容

42 篇文章 0 订阅

订阅专栏

<!--
全选商品列表；希望一单击button，右边就显示总金额
-->

<html>
	<head>
		<style type="text/css">
		</style>
	</head>
	<body>
		<script type="text/javascript">
		
			function getSum(){
				
				/*
				 *想要计算总金额，那么必须知道哪些商品被选中，怎么知道？
				 *打开DHTML API文档，找到INPUT type=checkbox 元素 | input type=checkbox 对象，其内有如下属性：
				 *checked：设置或获取复选框或单选钮的状态。
				 *该值有两种true和false，前者表示已被选中，后者表示未被选中。
				 *【总之】获取所有的名称为item的复选框。判断checked状态，为true的表示被选中，获取该节点的value进行累加。
				 */
				var sum = 0;
				var collItemNodes = document.getElementsByName("item");
				
				for(var x=0;x<collItemNodes.length;x++){
					
					if(collItemNodes[x].checked == true){//验证当前被遍历到的checkbox节点对象是否被选中
						
						sum = sum + parseInt(collItemNodes[x].value);//【切记】用parseInt将String类型转为int
					}
				}
				
				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" ο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="checkbox" name="allitem" οnclick="checkAll(this)"/>全选<br/>
		
		<input type="button" value="总金额" οnclick="getSum()" /><span id="sumid"></span>
	</body>
</html>

wy_0928

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM（二）-13-(示例-全选商品列表)

 function getSum(){ /* *想要计算总金额，那么必须知道哪些商品被选中，怎么知道？ *打开DHTML API文档，找到INPUT type=checkbox 元素 | input type=checkbox 对象，其内有如下
复制链接

扫一扫