微小购物车

来源:互联网 发布:主要的网络侦查技术有 编辑:程序博客网 时间:2024/04/27 21:06
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//ch 形参
function ckAll(ch) {
var isxz = ch.checked; //获取点击的状态
//获取所有name为ck的复选框
var cks = document.getElementsByName("ck");
//遍历下面所有的复选框,全部选中或者取消
for(var i in cks) {
cks[i].checked = isxz;
}
}
//点击进行计算总价
function count() {
var cks = document.getElementsByName("ck");
//获取所有的单价
var ds = document.getElementsByName("dj");  
//获取所有的数量
var ns = document.getElementsByName("num");
var sum = 0;  //定义变量存放总价

for(var i = 0; i < ds.length; i++) {
//
if(cks[i].checked) {
console.log("获取单价的的值:",ds[i].innerText); 
sum = sum + parseInt(ds[i].innerText) * parseInt(ns[i].innerText);
}
}
document.getElementById("sumprice").innerText = sum;
}
</script>
</head>


<body>
<table border="1px">
<tr>
<th>
<input type="checkbox" onchange="ckAll(this)" />
</th>
<th>商品名</th>
<th>单价</th>
<th>数量</th>
</tr>
<tr>
<td><input type="checkbox" name="ck" /></td>
<td>酸辣土豆粉</td>
<td><span name="dj"> 10 </span></td>
<td><span name="num"> 2 </span></td>
</tr>
<tr>
<td><input type="checkbox" name="ck" /></td>
<td>卧龙烤鱼</td>
<td><span name="dj"> 100</span> </td>
<td><span name="num"> 1</span></td>
</tr>
<tr>
<td><input type="checkbox" name="ck" /></td>
<td>北京烤鸭</td>
<td><span name="dj"> 300</span> </td>
<td><span name="num"> 2</span></td>
</tr>
<tr>
<td colspan="4">
<input type="button" value="总价" onclick="count()" />
<span id="sumprice"></span>
</td>
</tr>
</table>
</body>
</html>
原创粉丝点击