跟商城有关系的网站，难免会有购物车的结账界面。
我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。
欢迎指点！~
效果如图：
用到的素材：加号 减号 商品图 删除图标 选中的图标和没选中的图标
代码：
<body onselectstart="return false;" style="-moz-user-select:none;">
<table>
<thead>
<tr>
<th><input type="checkbox"></th>
<th>商品信息</th>
<th>数量</th>
<th>单价<span>（元）</span></th>
<th>金额<span>（元）</span></th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（一）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（二）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
<tr>
<td><input type="checkbox"></td>
<td>
<img src="./cart/good.png">
<p>小呀小苹果（三）</p>
</td>
<td><span class="add"></span><span class="num">3</span><span class="dec"></span></td>
<td class="per">￥<span>1900</span></td>
<td class="money">￥<span>3800</span></td>
<td><a class="del"></a></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td>已选：<span class="choosen">0</span>件 共<span class="total">0</span>元</td>
<td></td>
<td></td>
<td></td>
<td><button class="sure">结账</button></td>
</tr>
</tfoot>
</table>
</body>
*{ margin: 0;padding: 0;list-style: none;font-size: 16px;font-family: 'arial';font-weight: normal; }
table{ width: 1020px;margin: 0 auto;border: 1px solid gray;margin-top: 30px;border-collapse: collapse;text-align: center; }
table tr{ height: 100px;line-height: 100px; }
thead{ background: black;color: white; }
thead tr,tfoot tr{ height: 40px;line-height: 40px; }
table img{ float: left;width: 65px;height: 65px;margin-top: 18px; }
table input[type="checkbox"]{ width: 32px;height: 32px;-webkit-appearance: none;background: url(./cart/checkbox.png) no-repeat center center;vertical-align:middle }
tbody td:nth-child(1){ width: 7%; }
tbody td:nth-child(2){ width: 35%; }
tbody td:nth-child(3){ width: 13%; }
tbody td:nth-child(4){ width: 15%; }
tbody td:nth-child(5){ width: 15%; }
tbody td:nth-child(6){ width: 15%; }
tbody tr{ border-bottom: 1px solid black; }
table .add,table .dec,table .del{ display: inline-block;width: 14px;height: 21px;cursor: pointer; }
table .add{ background: url(./cart/add.png) no-repeat center center; }
table .dec{ background: url(./cart/dec.png) no-repeat center center; }
table .num{ display: inline-block;width: 57px;margin: 0 18px;height: 39px;line-height: 39px;border: 1px solid #b0b0b0;background: #d4d4d4; }
table .del{ width: 18px;background: url(./cart/del.png) no-repeat; }
table .money,table .total{ color: red; }
table .choosen{ color: #3083ff; }
table .sure{ width: 100%;height: 100%;background: #3083ff;color: #fff;border: none;cursor: pointer; }
input[type='checkbox']:checked{ background: url(./cart/check.png) no-repeat center center; }
window.onload = function(){
// 按顺序为：list个数 加 数量 减 删 选择框 金额 单价 选中的个数
// list个数 不包括thead
var oListNumber = document.getElementsByClassName('add').length;
var oAdds = document.getElementsByClassName('add');
var oNums = document.getElementsByClassName('num');
var oDecs = document.getElementsByClassName('dec');
var oDels = document.getElementsByClassName('del');
var oInputs = document.getElementsByTagName('input');
var oMoneys = document.getElementsByClassName('money');
var oPers = document.getElementsByClassName('per');
var oAllChecked = false; //全选
var othercheckbox =0; //除了全选以外的其他checkbox
changeMoney();
// checkbox点击事件
for(var i =0;i<oInputs.length;i++){
(function(i){
oInputs[i].onclick = function(){
// 判断除了全选以外的checkbox
if(i!=0){
if(oInputs[i].checked ==true){
othercheckbox++
}else{
othercheckbox--
}
}
// 判断是否全选
if(othercheckbox == oListNumber){
oInputs[0].checked = true;
}else{
oInputs[0].checked = false;
}
// 判断是否选择了全选checkbox
if(i==0){
oAllChecked = !oAllChecked;
for(var j=0;j<oInputs.length;j++){
oInputs[j].checked=oAllChecked;
}
if(oAllChecked){
othercheckbox = oListNumber
}else{
othercheckbox = 0;
}
}
changeTotal()
}
})(i)
}
// add事件
for(var i =0;i<oAdds.length;i++){
(function(i){
oAdds[i].onclick = function(){
oNums[i].innerText = parseInt(oNums[i].innerText) +1;
changeMoney()
changeTotal()
}
})(i)
}
// dec事件
for(var i =0;i<oDecs.length;i++){
(function(i){
oDecs[i].onclick = function(){
if(oNums[i].innerText != '0'){
oNums[i].innerText = parseInt(oNums[i].innerText) -1;
}
changeMoney()
changeTotal()
}
})(i)
}
// add事件和dec事件伴随的金额改变事件
function changeMoney(){
var oPerSpan =[]; //单价
var oMoneySpan=[]; //金额
for(var i=0;i<oListNumber;i++){
oPerSpan[i] = oPers[i].getElementsByTagName('span')[0].innerText;
oMoneySpan[i] = oMoneys[i].getElementsByTagName('span')[0];
oMoneySpan[i].innerText = (parseInt(oNums[i].innerText)*parseInt(oPerSpan[i]))
}
}
// del事件
for(var i =0;i<oDels.length;i++){
(function(i){
oDels[i].onclick = function(){
var thisdom = oDels[i].parentNode.parentNode;
var tbody = thisdom.parentNode;
tbody.removeChild(thisdom)
changeTotal()
}
})(i)
}
// 总数量 总金额
function changeTotal(){
var oChoosen = document.getElementsByClassName('choosen')[0];
var oTotal = document.getElementsByClassName('total')[0];
var sumNUM = 0
var sumTOTAL =0
for(var i=1;i<oInputs.length;i++){
if(oInputs[i].checked){
sumNUM = parseInt(oNums[i-1].innerText) + parseInt(sumNUM);
sumTOTAL = parseInt(oMoneys[i-1].getElementsByTagName('span')[0].innerText) +parseInt(sumTOTAL)
}
}
oChoosen.innerText = sumNUM;
oTotal.innerText = sumTOTAL;
}
}