JS實現購物車商品 加、減、單選、全選、刪除、手動輸入、價格更新等功能，供大家參考，具體內容如下

JavaScript代碼

$(function(){ $('#footer').hover(function(){ $('#footer').css({'border':'#e00'}) },) var inputs=document.getElementsByName('good-id'); var all=document.getElementsByName('all')[0]; all.onclick=function(){ for(var i=0;i<inputs.length;i++){ inputs[i].checked=this.checked; } sumprice(); } for(var i=0;i<inputs.length;i++){ inputs[i].onclick=function(){ var count=0; for(var j=0;j<inputs.length;j++){ if(inputs[j].checked==true){ count++ } } if(count<inputs.length){ all.checked=false; }else{ all.checked=true; } sumprice(); } } //減少 var minus=document.getElementsByName('minus'); for(var i=0;i<minus.length;i++){ minus[i].onclick=function(){ var counts=this.nextElementSibling; var count=parseInt(counts.value); if(count>1){ counts.value=--count; } sumprice(); } } //增加 var plus=document.getElementsByName('plus'); for(var i=0;i<plus.length;i++){ plus[i].onclick=function(){ var counts=this.previousElementSibling; var count=parseInt(counts.value); counts.value=++count; sumprice(); } } //手動輸入 var counts=document.getElementsByName('count'); for(var i=0;i<counts.length;i++){ counts[i].onblur=function(){ var count=parseInt(this.value); if(isNaN(count)||count<1){ count=1; } this.value=count; sumprice(); } } //計算function sumprice() { var tbody = document.getElementById('cart-goods-list'); var tbodyTr = tbody.getElementsByTagName('tr'); var sumprice=0; for(var i = 0; i < tbodyTr.length; i++) { //獲取單價 var priceEm = tbodyTr[i].getElementsByClassName('price-em')[0]; var price = parseFloat(priceEm.innerText); //獲取數量 var counts = tbodyTr[i].getElementsByClassName('combo-value')[0]; var count = parseInt(counts.value); //乘積 var chengji=price*count; //把乘積弄到金額里面 var amountEm=tbodyTr[i].getElementsByClassName('amount-em')[0]; amountEm.innerText=chengji.toFixed(2); //獲取單選框 var liD=tbodyTr[i].getElementsByTagName('input')[0]; if(liD.checked){ sumprice+=chengji; } } var zong=document.getElementById('total-amount-em'); zong.innerText=sumprice.toFixed(2);} //刪除 document.getElementById('cart-delete').onclick=function(){ var tbody = document.getElementById('cart-goods-list'); var del=[]; for(var i=0;i<inputs.length;i++){ if(inputs[i].checked){ del.push(inputs[i].parentElement.parentElement); } } for(var i=0;i<del.length;i++){ tbody.removeChild(del[i]); } all.checked=false; sumprice(); } document.getElementById('total-amount').onmouseover=function(){ document.getElementById('total-amount').style.cursor='pointer'; } document.getElementById('total-amount').onclick=function(){ var tbody = document.getElementById('cart-goods-list'); var tr=document.createElement('tr'); tr.innerHTML=’<tr><td><input type='checkbox' name='good-id' value='1'></td><td class='goods'><div class='goods-image'><img src='http://www.b3g6.com/bcjs/pic/goods/1.jpg'></div><div class='goods-information'><h3>Dior 迪奧 花漾甜心小姐 女士淡香水</h3><ul><li>50毫升</li><li>不支持7天無理由退貨</li></ul></div></td><td><span class='price'>￥<em class='price-em'>498.00</em></span></td><td><div class='combo'><input type='button' name='minus' value='-' class='combo-minus'><input type='text' name='count' value='1' class='combo-value'><input type='button' name='plus' value='+' class='combo-plus'></div></td><td><strong class='amount'>￥<em class='amount-em'>498.00</em></strong></td></tr>’; tbody.appendChild(tr); }})

CSS代碼

@charset 'utf-8';#main{ padding: 30px 0px;}#cart{ background: #FFFFFF; padding: 40px;}#cart h1{ line-height: 40px; padding: 0px 0px 10px 0px;}table.form{ border-collapse: collapse; empty-cells: show; margin: 20px 0px; padding: 0px; table-layout: fixed; width: 100%;}table.form th,table.form td{ border-bottom: 1px solid #DDDDDD; padding: 15px 10px; text-align: left;}table.form{ border-top: 3px solid #DDDDDD;}.goods .goods-image img{ border: 1px solid #DDDDDD; float: left; height: 100px; margin: 0px 20px 0px 0px;}.goods .goods-information{ float: left;}.goods .goods-information ul{ color: #666666; font-size: 12px; line-height: 20px; margin:10px 0px 0px 0px;}.price,.amount,#total-amount{ color: #E00000;}#total-amount{ font-size: 22px;}.price em,.amount em,#total-amount em{ font-style: normal;}.combo .combo-minus,.combo .combo-value,.combo .combo-plus{ background: #FFFFFF; border: 1px solid #DDDDDD; color: #333333; float: left; font-weight: bold; margin: 0px; outline: none; text-align: center;}.combo .combo-minus,.combo .combo-plus{ font-size: 16px; height: 26px; line-height: 26px; padding: 0px; width: 24px;}.combo .combo-value{ border-left: none; border-right: none; height: 20px; line-height: 20px; padding: 2px; width: 40px;}#cart-delete{ margin-left: 20px;}#settlement{ background: #E00000; border: none; color: #FFFFFF; float: right; font-size: 16px; height: 40px; line-height: 40px; margin: 0px; outline: none; padding: 0px; width: 160px;}

HTML代碼

<!DOCTYPE html><html> <head> <meta charset='utf-8'> <title>商城</title> <link rel='stylesheet' href='http://www.b3g6.com/bcjs/css/common.css' rel='external nofollow' > <link rel='stylesheet' href='http://www.b3g6.com/bcjs/iconfont/iconfont.css' rel='external nofollow' > <link rel='stylesheet' href='http://www.b3g6.com/bcjs/css/cart.css' rel='external nofollow' > <script type='text/javascript' src='http://www.b3g6.com/bcjs/js/jquery-3.1.1.js'></script> <script type='text/javascript' src='http://www.b3g6.com/bcjs/js/cart2.js'></script> </head> <body> <div id='topbar'> <div class='container'> <div id='topbar-location'> <i class='iconfont icon-location'></i> <a href='http://www.b3g6.com/bcjs/14323.html#'>北京</a> </div> <div id='topbar-menu'> <ul> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'class='red'>登錄</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/register.html' rel='external nofollow' >免費注冊</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>我的訂單</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>收藏夾</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>幫助中心</a> </li> </ul> </div> </div> </div> <div id='header'> <div class='container'> <div id='header-logo'> <a href='http://www.b3g6.com/bcjs/index.html' rel='external nofollow' > <h1>LOGO</h1> </a> </div> <div id='header-search'> <div id='header-search-combobox'> <form action='#' method='post'> <input type='text' name='keywords' placeholder='搜索' id='header-search-combobox-text'> <button type='submit' id='header-search-combobox-button'> <i class='iconfont icon-search'></i> </button> </form> </div> <div class='clear'> <ul id='header-search-hotkeywords'> <li> <strong>熱搜：</strong> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>筆記本</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>平板</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>手機</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>墨盒</a> </li> </ul> <a href='http://www.b3g6.com/bcjs/14323.html#'id='header-search-advancedsearch'>高級搜索</a> </div> </div> <div id='header-cart'> <i class='iconfont icon-cart'></i> <a href='http://www.b3g6.com/bcjs/14323.html#'>購物車</a> <strong>0</strong> </div> </div> </div> <div id='navigation'> <div class='container'> <div id='navigation-category'> <div id='navigation-category-heading'> <div class='float-left'> <i class='iconfont icon-menu'></i> <strong>全部商品分類</strong> </div> <div class='float-right'> <i class='iconfont icon-dropdown'></i> </div> </div> <div id='navigation-category-content'> <dl> <dt>美容彩妝</dt> <dd> <a href='http://www.b3g6.com/bcjs/14323.html#'>護膚</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>面膜</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>防曬</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>彩妝</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>香水</a> </dd> </dl> <dl> <dt>服飾箱包</dt> <dd> <a href='http://www.b3g6.com/bcjs/14323.html#'>大牌</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>服飾</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>箱包</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>配飾</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>鞋履</a> </dd> </dl> <dl> <dt>數碼家電</dt> <dd> <a href='http://www.b3g6.com/bcjs/14323.html#'>手機</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>生活</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>廚房</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>數碼</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>辦公</a> </dd> </dl> <dl> <dt>家居個護</dt> <dd> <a href='http://www.b3g6.com/bcjs/14323.html#'>洗護</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>居家</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>女性</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>寵物</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>家紡</a> </dd> </dl> <dl> <dt>運動戶外</dt> <dd> <a href='http://www.b3g6.com/bcjs/14323.html#'>運動服飾</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>運動鞋</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>戶外服飾</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>戶外鞋靴</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>戶外裝備</a> </dd> </dl> <dl> <dt>環球美食</dt> <dd> <a href='http://www.b3g6.com/bcjs/14323.html#'>飲品</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>零食</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>糧油</a> <em>|</em> <a href='http://www.b3g6.com/bcjs/14323.html#'>糕點</a> </dd> </dl> </div> </div> <div id='navigation-menu'> <ul> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>促銷</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>秒殺</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#'>優惠券</a> </li> </ul> </div> </div> </div> <div id='main'> <div class='container'> <div id='cart'> <h1>購物車</h1> <form action='#' method='post'> <table class='form'> <thead> <tr> <th width='8%'>選擇</th> <th width='50%'>商品</th> <th width='13%'>單價（元）</th> <th width='15%'>數量</th> <th width='14%'>金額（元）</th> </tr> </thead> <tbody id='cart-goods-list'> <tr> <td> <input type='checkbox' name='good-id' value='1'> </td> <td class='goods'> <div class='goods-image'> <img src='http://www.b3g6.com/bcjs/pic/goods/1.jpg'> </div> <div class='goods-information'> <h3>Dior 迪奧 花漾甜心小姐 女士淡香水</h3> <ul> <li>50毫升</li> <li>不支持7天無理由退貨</li> </ul> </div> </td> <td> <span class='price'>￥<em class='price-em'>498.00</em></span> </td> <td> <div class='combo'> <input type='button' name='minus' value='-' class='combo-minus'> <input type='text' name='count' value='1' class='combo-value'> <input type='button' name='plus' value='+' class='combo-plus'> </div> </td> <td> <strong class='amount'>￥<em class='amount-em'>498.00</em></strong> </td> </tr> <tr> <td> <input type='checkbox' name='good-id' value='2'> </td> <td class='goods'> <div class='goods-image'> <img src='http://www.b3g6.com/bcjs/pic/goods/3.jpg'> </div> <div class='goods-information'> <h3>LANCÔME 蘭蔻 嫩肌活膚精華肌底液</h3> <ul> <li>50毫升</li> <li>不支持7天無理由退貨</li> </ul> </div> </td> <td> <span class='price'>￥<em class='price-em'>598.00</em></span> </td> <td> <div class='combo'> <input type='button' name='minus' value='-' class='combo-minus'> <input type='text' name='count' value='1' class='combo-value'> <input type='button' name='plus' value='+' class='combo-plus'> </div> </td> <td> <strong class='amount'>￥<em class='amount-em'>598.00</em></strong> </td> </tr> </tbody> <tfoot> <tr> <td colspan='2'> <label> <input type='checkbox' name='all'> <span>全選</span> </label> <a href='http://www.b3g6.com/bcjs/14323.html#'id='cart-delete'>刪除</a> </td> <td colspan='3'> <span>合計：</span> <strong id='total-amount'>￥<em id='total-amount-em'>0.00</em></strong> <input type='submit' value='立即結算' id='settlement'> </td> </tr> </tfoot> </table> </form> </div> </div> </div> <div id='footer'> <div id='footer-promise'> <div class='container clear'> <div class='footer-promise-column clear'> <img src='http://www.b3g6.com/bcjs/img/1.png'> <dl> <dt>100%正品</dt> <dd>正品保障 假一賠十</dd> </dl> </div> <div class='footer-promise-column clear'> <img src='http://www.b3g6.com/bcjs/img/2.png'> <dl> <dt>無憂退貨</dt> <dd>國內退貨 售后無憂</dd> </dl> </div> <div class='footer-promise-column clear'> <img src='http://www.b3g6.com/bcjs/img/3.png'> <dl> <dt>低價保障</dt> <dd>縮減環節 確保低價</dd> </dl> </div> <div class='footer-promise-column clear'> <img src='http://www.b3g6.com/bcjs/img/4.png'> <dl> <dt>海外發貨</dt> <dd>海外直郵 閃電發貨</dd> </dl> </div> </div> </div> <div id='footer-link'> <div class='container clear'> <div class='footer-link-column'> <h3>購物指南</h3> <ul> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >購物流程</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >發票制度</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >賬戶管理</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >會員優惠</a> </li> </ul> </div> <div class='footer-link-column'> <h3>支付方式</h3> <ul> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >貨到付款</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >網上支付</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >禮 品 卡</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >銀行轉賬</a> </li> </ul> </div> <div class='footer-link-column'> <h3>訂單服務</h3> <ul> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >配送查詢</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >狀態說明</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >取消訂單</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >修改訂單</a> </li> </ul> </div> <div class='footer-link-column'> <h3>配送方式</h3> <ul> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >配送范圍</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >免郵標準</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >訂單自提</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >驗貨簽收</a> </li> </ul> </div> <div class='footer-link-column'> <h3>售后服務</h3> <ul> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >售后政策</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >價格保護</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >退款說明</a> </li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >退 換 貨</a> </li> </ul> </div> </div> </div> <div id='footer-menu'> <ul> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >關于我們</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >服務條款</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >隱私保護</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >聯系我們</a> </li> <li class='separator'>|</li> <li> <a href='http://www.b3g6.com/bcjs/14323.html#' >幫助中心</a> </li> </ul> </div> <div id='footer-copyright'> <p>Copyright &copy; 2016 XXX. All Rights Reserved.</p> </div> </div> </body></html>

注：CSS樣式代碼由于太多上面沒有給全，只給了主要代碼。小伙伴們可以根據實際情況修改樣式。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。