话不多说，看一下图
代码：
<html>
<head lang="en">
<meta charset="UTF-8">
<title>购物车</title>
<style>
table{
border-collapse: collapse;
width: 1000px;
margin: 0 auto;
}
.title{
font-size: 14px;
}
.face{
width: 80px;
height: 80px;
}
.name{
color: red;
font-size: 12px;
display: inline-block;
width: 200px;
margin-left: 10px;
}
td{
padding: 10px 0;
min-width: 60px;
}
.price{
font-weight: bold;
color: black;
}
.totle{
font-weight: bold;
color: red;
}
tr{
border: 1px solid #bfbfbf;
}
.btn button{
width: 30px;
height: 30px;
border-style: none;
background-color: #d4d4d4;
outline: none;
cursor: pointer;
}
.btn input{
width: 30px;
height: 30px;
border-style: none;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr class="title">
<td><input class="ckbox" type="checkbox"/>全选</td>
<td>商品信息</td>
<td>单价</td>
<td>数量</td>
<td>金额</td>
<td>操作</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="../img/img.jpg" alt=""/>
<span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
<td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="../img/img.jpg" alt=""/>
<span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
<td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="../img/img.jpg" alt=""/>
<span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
<td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="../img/img.jpg" alt=""/>
<span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
<td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr >
<td><input class="ckbtn" type="checkbox"/></td>
<td><img align="left" class="face" src="../img/img.jpg" alt=""/>
<span class="name">女生包包2018新款 搞怪可爱小包包 特别包包女款萌创意少女丑萌包</span>
</td>
<td><span class="price" data-price="39.00">￥39.00</span></td>
<td class="btn"><button class="btnleft">-</button><input class="txt" type="text" value="1"/><button class="btnright">+</button></td>
<td><span class="totle" data-totle="39.00">￥39.00</span></td>
<td>删除</td>
</tr>
<tr>
<td><input type="checkbox" class="ckbox"/>全选</td>
<td colspan="2">已选商品<span class="number">0</span>件</td>
<td>合计：<span class="totleprice">0</span>元</td>
<td colspan="2"><button>结算</button></td>
</tr>
</table>
<script>
var ckbox=document.getElementsByClassName("ckbox");//获取全选按钮
var ckbtn=document.getElementsByClassName("ckbtn");//获取商品前的选择按钮
var count=0;
//勾选功能
for(var i=0;i<ckbtn.length;i++){
ckbtn[i].onclick=function(){
if(this.checked){
count++;
}
else{
count--;
}
if(count==ckbtn.length){
ckbox[0].checked=true;
ckbox[1].checked=true;
}
else{
ckbox[0].checked=false;
ckbox[1].checked=false;
}
addtotle();
}
}
for(var key in ckbox){
ckbox[key].index =key;
ckbox[key].onclick=function(){
ckbox[this.index==0?1:0].checked=!ckbox[this.index==0?1:0].checked;
if(this.checked){
for(var i=0;i<ckbtn.length;i++){
ckbtn[i].checked=true;
}
}
else{
for(var i=0;i<ckbtn.length;i++){
ckbtn[i].checked=false;
}
count=0;
}
addtotle();
}
}
//数量加减
var btnleft=document.getElementsByClassName("btnleft");
var btnright=document.getElementsByClassName("btnright");
var txt=document.getElementsByClassName("txt");
var price=document.getElementsByClassName("price");
var totle=document.getElementsByClassName("totle");
var tprice=document.getElementsByClassName("totleprice");
var nub=document.getElementsByClassName("number");
for(var i=0;i<btnleft.length;i++){
btnleft[i].index=i;
btnleft[i].onclick=function(){
var num=txt[this.index].value;
num--;
if(num<1){
num=1
}
txt[this.index].value=num;
addprice(this.index,num);
addtotle();
};
btnright[i].index=i;
btnright[i].onclick=function(){
var num=txt[this.index].value;
num++;
txt[this.index].value=num;
addprice(this.index,num);
addtotle();
}
}
function addprice(index,value){
totle[index].innerHTML="￥"+(price[index].getAttribute("data-price")*value).toFixed(2);//toFixed(2)保留两位小数
totle[index].setAttribute("data-totle", (price[index].getAttribute("data-price") * value).toFixed(2));
//setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。
//getAttribute() 方法返回指定属性名的属性值。
}
function addtotle(){
var totleprice=0;
var number=0;
for(var i=0;i<ckbtn.length;i++){
if(ckbtn[i].checked){
totleprice+=parseFloat(totle[i].getAttribute("data-totle"));
number+=parseInt(txt[i].value);
}
}
tprice[0].innerHTML="￥"+totleprice.toFixed(2);
nub[0].innerHTML=number
}
</script>
</body>
</html>