效果：1.点击全选按钮可以全选，再点击就全不选2.点击数量 ‘ + " ‘ - " 可以自动计算。并且合计保持更新。当数量大于1时‘ - "出现。小于等于1时‘ - "消失3.点击删除可以实现删除功能。4.点击全选旁的删除按钮可以全部删除。5.选好商品后点击已选商品，可以显示选中的商品6.选中的商品可以取消选择。<！DOCTYPE html><html><head><meta charset="UTF-8"><title>购物车</title></head><style type="text/css">* {margin: 0;padding: 0;}a {color: #666;text-decoration: none;}body {padding: 20px;color: #666;}.fl{float: left;}.fr {float: right;}table {border-collapse: collapse;border-spacing: 0;border: 0;text-align: center;width: 937px;}th, td {border: 1px solid #CADEFF;}th {background: #e2f2ff;border-top: 3px solid #a7cbff;height: 30px;}td {padding: 10px;color: #444;}tbody tr:hover {background: RGB（238,246,255）;}.checkbox {width: 60px;}.goods {width: 300px;}.goods span {width: 180px;margin-top: 20px;text-align: left;float: left;}.price {width: 130px;}.count {width: 90px;}.count .add, .count input, .count .reduce {float: left;margin-right: -1px;position: relative;z-index: 0;}.count .add, .count .reduce {height: 23px;width: 17px;border: 1px solid #e5e5e5;background: #f0f0f0;text-align: center;line-height: 23px;color: #444;}.count .add:hover, .count .reduce:hover {color: #f50;z-index: 3;border-color: #f60;cursor: pointer;}.count input {width: 50px;height: 15px;line-height: 15px;border: 1px solid #aaa;color: #343434;text-align: center;padding: 4px 0;background-color: #fff;z-index: 2;}.subtotal {width: 150px;color: red;font-weight: bold;}.operation {width: 80px;}.operation span:hover, a:hover {cursor: pointer;color: red;text-decoration: underline;}img {width: 100px;height: 80px;/*border: 1px solid #ccc;*/margin-right: 10px;float: left;}.foot {width: 935px;margin-top: 10px;color: #666;height: 48px;border: 1px solid #c8c8c8;background-color: #eaeaea;background-image:linear-gradient（RGB（241,241,241）,RGB（226,226,226））;position: relative;z-index: 8;}.foot div, .foot a {line-height: 48px;height: 48px;}.foot .select-all {width: 100px;height: 48px;line-height: 48px;padding-left: 5px;color: #666;}.foot .closing {border-left: 1px solid #c8c8c8;width: 100px;text-align: center;color: #000;font-weight: bold;background: RGB（238,238,238）;cursor: pointer;}.foot .total{margin: 0 20px;cursor: pointer;}.foot #priceTotal, .foot #selectedTotal {color: red;font-family: "Microsoft Yahei";font-weight: bold;}.foot .selected {cursor: pointer;}.foot .selected .arrow {position: relative;top:-3px;margin-left: 3px;}.foot .selected .down {position: relative;top:3px;display: none;} .show .selected .down {display: inline;} .show .selected .up {display: none;}.foot .selected:hover .arrow {color: red;}.foot .selected-view {width: 935px;border: 1px solid #c8c8c8;position: absolute;height: auto;background: #ffffff;z-index: 9;bottom: 48px;left: -1px;display:none;}.show .selected-view {display: block;}.foot .selected-view div{height: auto;}.foot .selected-view .arrow {font-size: 16px;line-height: 100%;color:#c8c8c8;position: absolute;right: 330px;bottom: -9px;}.foot .selected-view .arrow span {color: #ffffff;position: absolute;left: 0px;bottom: 1px;}#selectedViewList {padding: 20px;margin-bottom: -20px;}#selectedViewList div{display: inline-block;position: relative;width: 100px;height: 80px;border: 1px solid #ccc;margin: 10px;}#selectedViewList div span {display: none;color: #ffffff;font-size: 12px;position: absolute;top: 0px;right: 0px;width: 60px;height: 18px;line-height: 18px;text-align: center;background: RGBA（0,0,0,.5）;cursor: pointer;}#selectedViewList div:hover span {display: block;}</style><body><table id="cartTable"><thead><tr><th><label><input class="check-all check" type="checkbox"/> 全选</label></th><th>商品</th><th>单价</th><th>数量</th><th>小计</th><th>操作</th></tr></thead><tbody><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704loo2mdzuux5123gu.jpg.editor.jpg" alt=""/><span>Casio/卡西欧 EX-TR350</span></td><td class="price">5999.88</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">5999.88</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704m26zvv6e52sjczee.jpg.editor.jpg" alt=""/><span>Canon/佳能 PowerShot SX50 HS</span></td><td class="price">3888.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">3888.50</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075704etdabo2fpppdplsa.jpg.editor.jpg" alt=""/><span>Sony/索尼 DSC-WX300</span></td><td class="price">1428.50</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">1428.50</td><td class="operation"><span class="delete">删除</span></td></tr><tr><td class="checkbox"><input class="check-one check" type="checkbox"/></td><td class="goods"><img src="http://cdn.attach.qdfuns.com/notes/pics/201612/21/075823wdtw1pdvf3wbwd8b.jpg.editor.jpg" alt=""/><span>Fujifilm/富士 instax mini 25</span></td><td class="price">640.60</td><td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1"/><span class="add">+</span></td><td class="subtotal">640.60</td><td class="operation"><span class="delete">删除</span></td></tr></tbody></table><div class="foot" id="foot"><label class="fl select-all"><input type="checkbox" class="check-all check"/> 全选</label><a class="fl delete" id="deleteAll" href="javascript:;">删除</a><div class="fr closing">结 算</div><div class="fr total">合计：￥<span id="priceTotal">0.00</span></div><div class="fr selected" id="selected">已选商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div><div class="selected-view"><div id="selectedViewList" class="clearfix"><！--<div><img src="images/1.jpg"><span>取消选择</span></div>--></div><span class="arrow">◆<span>◆</span></span></div></div><script>window.onload = function （） {if （！document.getElementsByClassName） {document.getElementsByClassName = function （cls） {var ret = [];var els = document.getElementsByTagName（"*"）;for （var i = 0, len = els.length; i < len; i++） {if （els[i].className === cls|| els[i].className.indexOf（cls + " "） >= 0|| els[i].className.indexOf（" " + cls + " "） >= 0|| els[i].className.indexOf（" " + cls） >= 0） {ret.push（els[i]）;}}return ret;}}var cartTable = document.getElementById（"cartTable"）;var tr = cartTable.children[1].rows;var checkInputs = document.getElementsByClassName（"check"）;var checkAllInputs = document.getElementsByClassName（"check-all"）;var selectedTotal = document.getElementById（"selectedTotal"）;var priceTotal = document.getElementById（"priceTotal"）;var selected = document.getElementById（"selected"）;var foot = document.getElementById（"foot"）;var selectedViewList = document.getElementById（"selectedViewList"）;var deleteAll = document.getElementById（"deleteAll"）;//计算function getTotal（） {var seleted = 0;var price = 0;var HTMLstr = "";for （var i = 0, len = tr.length; i < len; i++） {if （tr[i].getElementsByTagName（"input"）[0].checked） {tr[i].className = "on";seleted += parseInt（tr[i].getElementsByTagName（"input"）[1].value）;price += parseFloat（tr[i].cells[4].innerHTML）;HTMLstr += "<div><img src="" + tr[i].getElementsByTagName（"img"）[0].src + ""><span class="del" index="" + i + "">取消选择</span></div>"}else {tr[i].className = "";}}selectedTotal.innerHTML = seleted;priceTotal.innerHTML = price.toFixed（2）;selectedViewList.innerHTML = HTMLstr;if （seleted == 0） {foot.className = "foot";}}//小计function getSubTotal（tr） {var tds = tr.cells;var price = parseFloat（tds[2].innerHTML）;var count = parseInt（tr.getElementsByTagName（"input"）[1].value）;var SubTotal = parseFloat（price * count）;tds[4].innerHTML = SubTotal.toFixed（2）;}for （var i = 0 , len = checkInputs.length; i < len; i++） {checkInputs[i].onclick = function （） {if （this.className === "check-all check"） {for （var j = 0; j < checkInputs.length; j++） {checkInputs[j].checked = this.checked;}}if （this.checked == false） {for （var k = 0; k < checkAllInputs.length; k++） {checkAllInputs[k].checked = false;}}getTotal（）;}}selected.onclick = function （） {if （foot.className == "foot"） {if （selectedTotal.innerHTML ！= 0） {foot.className = "foot show";}}else {foot.className = "foot";}}selectedViewList.onclick = function （e） {e = e || window.event;var el = e.srcElement;if （el.className == "del"） {var index = el.getAttribute（"index"）;var input = tr[index].getElementsByTagName（"input"）[0];input.checked = false;input.onclick（）;}}for （var i = 0; i < tr.length; i++） {tr[i].onclick = function （e） {e = e || window.event;var el = e.srcElement;var cls = el.className;var input = this.getElementsByTagName（"input"）[1];var val = parseInt（input.value）;var reduce = this.getElementsByTagName（"span"）[1];switch （cls） {case "add":input.value = val + 1;reduce.innerHTML = "-";getSubTotal（this）;break;case "reduce":if （val > 1） {input.value = val - 1;}if （input.value <= 1） {reduce.innerHTML = "";}getSubTotal（this）;break;case "delete":var conf = confirm（"确定要删除吗？"）;if （conf） {this.parentNode.removeChild（this）;}breakdefault :break;}getTotal（）;}tr[i].getElementsByTagName（"input"）[1].onkeyup = function （） {var val = parseInt（this.value）;var tr = this.parentNode.parentNodevar reduce = tr.getElementsByTagName（"span"）[1];if （isNaN（val） || val < 1） {val = 1;}this.value = val;if （val <= 1） {reduce.innerHTML = "";}else {reduce.innerHTML = "-";}getSubTotal（tr）;getTotal（）;}}deleteAll.onclick = function （） {if （selectedTotal.innerHTML ！= "0"） {var conf = confirm（"确定删除吗？"）;if （conf） {for （var i = 0; i < tr.length; i++） {var input = tr[i].getElementsByTagName（"input"）[0];if （input.checked） {tr[i].parentNode.removeChild（tr[i]）;i--;}}}}}checkAllInputs[0].checked = true;checkAllInputs[0].onclick（）;}</script></body></html>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！
易网时代-编程资源站