跟商城有关系的网站，难免会有购物车的结账界面。 我用javascript实现了增加数量/减少数量,实时计算总金额，删除该商品，选中商品/反选商品/全选/全反选...的操作。 欢迎指点！~ 效果如图：（图片有点大，可以到这里看 ）
用到的素材：加号 减号 商品图 删除图标 选中的图标和没选中的图标 
代码： | 商品信息 | 数量 | 单价（元） | 金额（元） | 操作 | |
|---|---|---|---|---|---|
 小呀小苹果（一） | 3 | ￥1900 | ￥3800 | ||
| 小呀小苹果（二） | 3 | ￥1900 | ￥3800 | ||
| 小呀小苹果（三） | 3 | ￥1900 | ￥3800 | ||
| 已选：0件 共0元 |
*{ 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