思想:a:首先可以通过数据库,当你点击一次选择时,对复选框进行扫描,查出所有已经被选中的复选框,这个复选框需要加一个自定义属性,这个属性就是这个商品的id号,通过id号在数据库查询相应的价格进行累加。b:我这里没有用数据库,因为我的上一个需求已经把价格从数据库拿出来了,所以我直接在复选框上加了一个商品价格的自定义属性,当每次点击复选框时对复选框进行扫描,查出所有已经被选中的复选框,然后获取到价格进行累加
效果
1.首先没点击时时0元
2.当点击一个复选框
3.当点击两个复选框
4.当点击全选复选框时
5.点击全不选
代码
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link href="_css_/bootstrap.css" rel="stylesheet">
<script src="_js_/bootstrap.min.js"></script>
<script type="text/javascript" src="_js_/jquery.min.js"></script>
<script type="text/javascript" src="_js_/clientJs/shopping_car.js"></script>
</head>
<body>
<div class="container" id="app">
<div class="row">
<!-- bootstrap的面板组件包含带标题的面板、带表格的面板灯 -->
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">我的购物车</h3>
</div>
<div class="panel-body">
<!-- 带表格的面板 table-hover:鼠标悬停高亮的表格-->
<table class="table table-hover">
<thead>
<tr>
<th><input type="checkbox" id="all_or_no" onclick="check_all_no()"></th>
<th>序号</th>
<th>商品名称</th>
<th>商品单价(元)</th>
<th>购买数量</th>
<th>小计(元)</th>
<th>商品操作</th>
</tr>
</thead>
<tbody>
{volist name='car' id='car'}
<tr>
<td>
<input type="checkbox" name="car_goods" goods_price="{$car.goods_price}" onclick="total()">
</td>
<td>{$i}</td>
<td>{$car.goods_name}</td>
<td>{$car.goods_price}</td>
<td>1</td>
<td>{$car.goods_price}</td>
<td>
<div class="btn-group btn-group-sm">
<button class="btn btn-danger" type="button">删除</button>
</div>
</td>
</tr>
{/volist}
</tbody>
</table>
</div>
<!-- 带脚注的面板 -->
<div class="panel-footer" style="text-align: right;">
<button class="btn btn-danger" type="button">结算</button>
共计<span id="total">0</span>元
</div>
</div>
</div>
</div>
</body>
</html>
js
$(function(){
var all_or_no = document.getElementById("all_or_no");
var car_goods = document.getElementsByName("car_goods");
for (var i=0;i<car_goods.length;i++)
car_goods[i].checked=false;
all_or_no.checked=false;
// alert( $("input[name='car_goods']:checked").length);
});
//算出总价格
function total() {
// 获取所有已选复选框
var checked= $("input[name='car_goods']:checked")
var total=0;
//扫描累加
for (var i=0;i<checked.length;i++){
var goods_price=checked[i].getAttribute('goods_price');
var total_price=parseInt(goods_price) ;
total+=total_price;
}
//渲染前端
$("#total").html(total);
}
//复选框
function check_all_no() {
var all_or_no =document.getElementById("all_or_no");
var car_goods =document.getElementsByName("car_goods");
if (all_or_no.checked) {
for (var i=0;i<car_goods.length;i++)
car_goods[i].checked=true;
}
else
{
for (var i = 0; i < car_goods.length; i++)
car_goods[i].checked= false;
}
total();
}