21-JS 计算商品列表总价

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="">
			计算商品列表总价：
		</div>
		<input type="checkbox" name="item" value="8000" /> 笔记本电脑 9000 元 <br>
		<input type="checkbox" name="item" value="5000" /> 苹果牌手机 8000 元 <br>
		<input type="checkbox" name="item" value="3000" /> 小米牌手机 3000 元 <br>
		<input type="checkbox" name="item" value="2000" /> 扫地机器人 2000 元 <br>
		<input type="checkbox" name="item" value="1000" /> 电动剃须刀 1000 元 <br>
		<input type="checkbox" name="item" value="500" />  特步运动鞋 500  元 <br>
		<input type="checkbox" id="all" onclick="checkAll()" /> 全选/取消 <br>
		<input type="button" value="计算总额" onclick="getSum()" />
		<span id="sumSpan"></span>
	</body>
	<script type="text/javascript">
		var checkboxs = document.getElementsByName("item");

		function checkAll() {
			var all = document.getElementById("all");
			for (var i = 0; i < checkboxs.length; i++) {
				checkboxs[i].checked = all.checked;
			}
		}

		function getSum() {
			var sum = 0;
			for (var i = 0; i < checkboxs.length; i++) {
				if (checkboxs[i].checked) {
					sum += parseInt(checkboxs[i].value);
				}
			}
			var sumSpan = document.getElementById("sumSpan");
			sumSpan.innerHTML = ("¥ " + sum).fontcolor("red");
		}
	</script>
</html>

04_大前端 > 03_JavaScript
#JavaScript
21-JS 计算商品列表总价
https://janycode.github.io/2018/05/25/04_大前端/03_JavaScript/21-JS 计算商品列表总价/
作者
Jerry(姜源)
发布于
2018年5月25日
许可协议