###### ### ## # 通过JS实现，购物车中商品价格和数量的设定，是否选择该物品，计算已选中商品的总价格。通过JS实现，购物车中商品价格和数量的设定，是否选择该物品，计算已选中商品的总价格。
------------
```markdown
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function sum(){
var prices = document.getElementsByName("price");
var counts = document.getElementsByName("count");
var options = document.getElementsByName("option");
var totals = document.getElementsByName("total");
var sum = 0;
for(var i = 0;i < options.length; i++){
var price = prices[i].value;
var count = counts[i].value;
totals[i].value = price * count;
if(options[i].checked){
sum += price * count;
}
}
var total = document.getElementById("total");
total.value = sum;
}
</script>
</head>
<body>
<table width="600px" border="1px" cellspacing="1px" cellpadding="1px" id="table">
<tr><th>单价</th>
<th>个数</th>
<th>合计</th>
<th>选择</th>
</tr>
<tr><td><input type="text" name="price" id="price1" ></td>
<td><input type="text" name="count" id="count1" ></td>
<td><input type="text" name="total" id="total1" readonly="readonly" ></td>
<th><input type="checkbox" name="option" id="selected1"/>选中</th>
</tr>
<tr><td><input type="text" name="price" id="price2" ></td>
<td><input type="text" name="count" id="count2" ></td>
<td><input type="text" name="total" id="total2" readonly="readonly" ></td>
<th><input type="checkbox" name="option" id="selected2"/>选中</th>
</tr>
<tr><td><input type="text" name="price" id="price3" ></td>
<td><input type="text" name="count" id="count3" ></td>
<td><input type="text" name="total" id="total3" readonly="readonly" ></td>
<th><input type="checkbox" name="option" id="selected3"/>选中</th>
</tr>
<tr>
<td colspan="2">总计</td>
<td colspan="2"><input type="text" name="total" id="total" readonly="readonly" ></td>
</tr>
</table>
<button onclick="sum()">求和</button>
</body>
</html>
```
网友评论