11-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>


11-JS 计算商品列表总价
https://janycode.github.io/2018/05/25/04_网页技术/06_JavaScript/11-JS 计算商品列表总价/
作者
Jerry(姜源)
发布于
2018年5月25日
许可协议