其实boostrap用了协助布局的，不用它自己写样式也是可以的。
首先导入几个文件
<link rel="stylesheet" href="assets/plug-in/bootstrap-3.3.0/css/bootstrap.min.css" />
js导入在html底部
<script src="assets/plug-in/jquery/jquery-2.2.4.js" ></script>
布局结构代码：
<div class="bs-example">
<form action="">
<table class="table table-striped">
<thead>
<tr>
<th>
商品图片
</th>
<th>商品信息</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" name="item"/>
<img src="assets/images/1.jpg" alt="" width="80px" height="80px"/>
</td>
<td>
<a href="#" class="information">
AULA/狼蛛 暴风G95V头戴式震动游戏耳机电脑耳麦重低音带话筒lol
</a>
</td>
<td>￥<span class="amount">119.00</span></td>
<td>
<div class="count">
<span class="sub">-</span>
<input type="text" name="count[1]" value="1"/>
<span href="#" class="add">+</span>
</div>
</td>
<td>￥<span class="total">119.00</span></td>
<td><a href="#" class="remove">删除</a></td>
</tr>
<tr>
<td>
<input type="checkbox" name="item"/>
<img src="assets/images/2.jpg" alt="" width="80px" height="80px"/>
</td>
<td>
<a href="#" class="information">
361女鞋冬季保暖361度运动鞋女2016新款休闲复古慢跑鞋女士跑步鞋
</a>
</td>
<td>￥<span class="amount">89.00</span></td>
<td>
<div class="count">
<span class="sub">-</span>
<input type="text" name="count[2]" value="1"/>
<span class="add">+</span>
</div>
</td>
<td>￥<span class="total">89.00</span></td>
<td><a href="#" class="remove">删除</a></td>
</tr>
</tbody>
</table>
<div class="total-bar">
<label class="allcheck">
<input type="checkbox" />全选
</label>
<a href="#" class="delete">删除</a>
<div class="settlement">
<div class="sum-count">
已选商品<span>0</span>件
</div>
<div class="sum-amount">
合计（不含运费）：<span>0.00</span>
</div>
<div class="complete">
<a href="#" >结 算</a>
</div>
</div>
</div>
</form>
</div>
样式：
a{
text-decoration: none;
}
a:hover{
color: #f50;
}
.all{margin-bottom:0px;}
.bs-example{
width:70%;
margin:100px auto 0 auto;
font-family: Arial,"Microsoft Yahei";
border:1px solid #ddd;
}
.bs-example .table{
margin-bottom:0px;
}
.bs-example .table tr th{
text-align:center;
}
.bs-example .table tr td a.information{
display:block;
text-align:center;
}
.bs-example .table tr td .count span{
float:left;
height:25px;
width:20px;
line-height: 25px;
text-align: center;
border: 1px solid #e5e5e5;
background: #f0f0f0;
cursor:pointer;
}
.bs-example .table tr td .count span:hover{
border-color: #f60;
color:#f60;
}
.bs-example .table tr td .count input{
float:left;
width:40px;
height:25px;
text-align:center;
}
.bs-example .table tr td a.remove{
font-weight:bold;
}
.bs-example .delete{
margin-left:20px;
}
.bs-example .total-bar label{
margin-left:8px;
}
.bs-example .total-bar{
width:100%;
height:50px;
line-height:50px;
background:#e5e5e5;
}
.bs-example .total-bar .settlement{
float:right;
}
.bs-example .total-bar .settlement div{
float:left;
}
.bs-example .total-bar .settlement .sum-count {
margin-right: 30px;
}
.bs-example .total-bar .settlement span{
padding:0 5px;
color: #ff4400;
font-weight: 700;
font-size: 18px;
font-family: tohoma,arial;
}
.bs-example .total-bar .settlement .complete a{
display:block;
width:120px;
height:50px;
/*background: #ff4400;*/
background: #B0B0B0;
border-radius:5px;
line-height:50px;
text-align: center;
color: #fff;
font-size:20px;
cursor: not-allowed;
}
.bs-example .total-bar .settlement .complete .allow{
cursor:pointer;
background: #f60;
}
预览效果：
接下来需要实现这些功能：
1、没有商品选中时，结算图片为暗色；有商品选中时为橙色
2、点击加减符号，文本框数量变化，最小为1。同时后面的金额也同步进行变化；
3、如果商品被选中，下面商品件数和合计价格也会发生变化；
4、选中状态下，改变数量，结算金额也会发生变化；
5、全选功能；
6、删除功能；
仔细分析发现其实每个功能都不是独立的，相互之间都是有关联的，最终都会通过计算改变结算金额。所以我们无论是改变了什么，都有可能影响最终金额。
首先定义一个计算结算金额的函数：
function settlement(){
var total=0;
//count保存被选中商品的数量
//total累加每个选中商品最后面的金额
var count = $(".bs-example .table tr td input:checked").each(function(){
total+=Number($(this).parents("tr").find(".total").text());
}).size();
/*判断是否选中*/
var $allow = $(".bs-example .total-bar .settlement .complete a");
count==0?$allow.removeClass("allow"):$allow.addClass("allow");
total = total.toFixed(2);//保留两位小数
$(".settlement .sum-count span").text(count);//赋值件数
$(".settlement .sum-amount span").text(total);//赋值结算金额
}
其次进行加减判断并做相应改变：
$(".bs-example .table tr td .count span").on("click",function(){
var $this = $(this);
var num = $this.parent().find("input")[0];
if($this.hasClass("add")){
num.value++;
}else{
num.value = (num.value==1?1:num.value-1);
}
var $row= $this.parents("tr");
var total = Number($row.find(".amount").text()*num.value);
total = total.toFixed(2);
$row.find(".total").text(total);
//一旦执行了加减，相应计算结算金额
settlement();
});
复选框状态改变，进行计算(涉及到全选框的改变)：
$(".bs-example .table tr td input[type='checkbox']").on("change",function(){
var sum = 0;
var count = $(".bs-example .table tr td input[type='checkbox']").each(function(){
if($(this).prop("checked")){
sum=sum+1;
}else{
sum=sum-1;
}
}).size();
if(count==sum){
$(".bs-example .total-bar .allcheck input").prop("checked",true);
}else{
$(".bs-example .total-bar .allcheck input").prop("checked",false);
}
settlement();
});
全选功能：
$(".bs-example .total-bar .allcheck input").on("change", function(){
$(".bs-example .table tr td input[type='checkbox']").prop("checked",this.checked);
settlement();
});
选择性删除：
$(".bs-example .total-bar .delete").on("click",function(){
$(".bs-example .table tr td input:checked").each(function(){
$(this).parents("tr").remove();
});
settlement();
});
单独删除：
$(".bs-example .table tr td .remove").on("click",function(){
$(this).parents("tr").remove();
settlement();
});
