html5实现全选按钮，及统计所选择商品的总价并输出
现有一个商品选择列表（复选框），HTML代码及效果如下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="item" value="3000" />笔记本电脑<br/>
<input type="checkbox" name="all" οnclick="checkAll(this)" />全选<br/>
<input type="button" value="总金额:" οnclick="getSum()" /><span id="sumid"></span>
</body>
</html>要求1：实现checkAll(this)函数。作用：通过选择/取消选择全选项目能够实现对所有项目的选择/取消。
提示：checked 属性规定在页面加载时应该被预先选定的 input 元素。
checked 属性 与 <input type="checkbox"> 或 <input type="radio"> 配合使用。
checked 属性也可以在页面加载后，通过 JavaScript 代码进行设置。
要求2：实现getSum()函数。作用：统计所选择商品的总价并输出在span区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000"/>笔记本电脑<br/>
<input type="checkbox" name="item" value="3000"/>平板电脑<br/>
<input type="checkbox" name="item" value="3000"/>手机<br/>
<input type="checkbox" name="all" id="all" onclick="checkAll(this)"/>全选<br/>
<input type="button" value="总金额" onclick="getSum()"/><span id="sumid"></span>
<script type="text/javascript">
var item = document.getElementsByName("item");
var all = document.getElementById("all");
function checkAll(){
for(var i=0;i<item.length;i++){//全选
item[i].checked = all.checked;
}
}
function getSum(){
var sum = 0;
for(var i=0;i<item.length;i++){//计算
if(item[i].checked){
sum += parseInt(item[i].value);
}
}
var span = document.getElementById("sumid");
span.innerHTML = (new String(sum).fontcolor("red"));//显示
}
</script>
</body>
</html>