<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.1.1.js">
</script>
<script type="text/javascript">
function calcPrice(){
var sum=0;
//选中所有勾选状态的名称是checkOne的复选框
$("[name=checkOne]:checked:checkbox").each(function(){
//遍历每个复选框同一行的总价文字
var p=$(this).parent().parent().find(".sum").text();
// alert(p);
sum+=parseFloat(p);
});
// alert(sum);
//显示总价格
$("#total").text(sum);
}
$(function(){
calcPrice();
//给每个商品的复选框加点击事件，调用计算价格
$("[name=checkOne]:checked").click(function(){
calcPrice();
});
//给checkAll复选框设置点击事件
$("[name=checkAll]:checkbox").click(function(){
//把当前复选框的checked属性赋值给checkone复选框的checked属性
$("[name=checkOne]:checkbox").prop("checked",$(this).prop("checked"));
calcPrice();
});
//实现增加数量
$("[value='+']:button").click(function(){
//找到时按钮上一个span标签进行修改
var num=$(this).prev("span").text();
num=parseInt(num)+1;
if(num>=20){
return;
}
$(this).prev("span").text(num);
//找到同一行价格
var price=$(this).parent().parent().find(".price").text();
//修改同一行的总价
$(this).parent().parent().find(".sum").text(price*num);
calcPrice();
});
//实现减少数量
$("[value='-']:button").click(function(){
//找到时按钮下一个span标签进行修改
var num=$(this).next("span").text();
num=parseInt(num)-1;
if(num<0){
return;
}
$(this).next("span").text(num);
//找到同一行价格
var price=$(this).parent().parent().find(".price").text();
//修改同一行的总价
$(this).parent().parent().find(".sum").text(price*num);
calcPrice();
});
$("[name=order]:button").click(function(){
var sumAll=0;
var name="";
var num="";
var sum="";
$("[name=checkOne]:checked:checkbox").each(function(){
name=$(this).parent().parent().find(".name").text();
num=$(this).parent().parent().find(".count").text();
sum=$(this).parent().parent().find(".sum").text();
sumAll+=parseInt(sum);
alert("订单信息：\n"+"订单名称："+name+"\n订单数据量："+num+"\n订单总价："+sum);
});
alert("共付款："+sumAll)
});
});
</script>
</head>
<body>
总价格：<span id="total">0</span>
<table width="800" border="1">
<tr>
<th>
<input type="checkbox" name="checkAll" checked="true" />
</th>
<th>编号</th>
<th>名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
</tr>
<tr>
<td>
<input type="checkbox" checked="true" name="checkOne" />
</td>
<td>
<span class="id">1</span>
</td>
<td>
<span class="name">小米1</span>
</td>
<td>
<span class="price">1000</span>
</td>
<td>
<input type="button" value="-" />
<span class="count">1</span>
<input type="button" value="+" />
</td>
<td>
<span class="sum">1000</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked="true" name="checkOne" />
</td>
<td>
<span class="id">2</span>
</td>
<td>
<span class="name">小米2</span>
</td>
<td>
<span class="price">2000</span>
</td>
<td>
<input type="button" value="-" />
<span class="count">1</span>
<input type="button" value="+" />
</td>
<td>
<span class="sum">2000</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked="true" name="checkOne"/>
</td>
<td>
<span class="id">3</span>
</td>
<td>
<span class="name">小米3</span>
</td>
<td>
<span class="price">3000</span>
</td>
<td>
<input type="button" value="-" />
<span class="count">1</span>
<input type="button" value="+" />
</td>
<td>
<span class="sum">3000</span>
</td>
</tr>
<tr>
<td>
<input type="checkbox" checked="true" name="checkOne" />
</td>
<td>
<span class="id">4</span>
</td>
<td>
<span class="name">小米4</span>
</td>
<td>
<span class="price">4000</span>
</td>
<td>
<input type="button" value="-" />
<span class="count">1</span>
<input type="button" value="+" />
</td>
<td>
<span class="sum">4000</span>
</td>
</tr>
</table>
<input type="button" name="order" id="" value="下单"/>
</body>
</html>
