JavaScript實(shí)現(xiàn)簡單購物小表格
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡單購物小表格的具體代碼,供大家參考,具體內(nèi)容如下
html代碼:
<table border="" cellspacing="0" cellpadding="1"> <tr style="background-color: #0099cc;"> <td><input type="checkbox"class="all"/></td> <td style="text-align: center; width: 200px;">商品</td> <td style="color: white; width: 70px; height: 30px; text-align: center;">價(jià)錢</td> </tr> <tr class="zuida"> <td><input type="checkbox" class="lla"/></td> <td>蘋果</td> <td style="text-align: center;" class="zongji">8000</td> </tr> <tr class="zuida"> <td><input type="checkbox" class="lla"/></td> <td>香蕉</td> <td style="text-align: center;" class="zongji">5000</td> </tr> <tr class="zuida"> <td><input type="checkbox" class="lla"/></td> <td>梨子</td> <td style="text-align: center;" class="zongji">2000</td> </tr> <tr class="zuida"> <td><input type="checkbox" class="lla"/></td> <td>蔬菜</td> <td style="text-align: center;" class="zongji">2000</td> </tr> <tr> <td colspan="3">總價(jià)是:<span class="zongjia">0</span>元</td> </tr> </table>
JQ代碼:
<script src="jquery-3.6.0.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ $(".all").change(function(){ var value=$(this).prop("checked") $(".lla").prop("checked",value) zongjia() }) $(".lla").click(function(){ var chang1=$(".lla").length; var chang2=$(".lla:checked").length; if(chang1===chang2){ $(".all").prop("checked",true) }else{ $(".all").prop("checked",false) } zongjia() }) $(".lla").change(function(){ zongjia() }) function zongjia(){ var xuan=$(".lla:checked").parents(".zuida"); var num=0; xuan.each(function(index,rom){ var xuanzhi=$(rom).find(".zongji").text()*1; num+=xuanzhi; }) $(".zongjia").text(num); } }) </script>
成品圖:
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vuejs手把手教你寫一個(gè)完整的購物車實(shí)例代碼
- js購物車實(shí)現(xiàn)思路及代碼(個(gè)人感覺不錯(cuò))
- JavaScript編寫一個(gè)簡易購物車功能
- Javascript實(shí)現(xiàn)購物車功能的詳細(xì)代碼
- js實(shí)現(xiàn)簡單的購物車有圖有代碼
- Jsp+Servlet實(shí)現(xiàn)購物車功能
- Javascript操縱Cookie實(shí)現(xiàn)購物車程序
- 簡單的前端js+ajax 購物車框架(入門篇)
- 原生js模擬淘寶購物車項(xiàng)目實(shí)戰(zhàn)
- js實(shí)現(xiàn)仿購物車加減效果
相關(guān)文章
js下將阿拉伯?dāng)?shù)字每三位一逗號分隔(如:15000000轉(zhuǎn)化為15,000,000)
這篇文章主要介紹了js下將阿拉伯?dāng)?shù)字每三位一逗號分隔(如:15000000轉(zhuǎn)化為15,000,000),需要的朋友可以參考下2014-06-06js實(shí)現(xiàn)時(shí)間日期校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)時(shí)間日期校驗(yàn),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05JS中關(guān)于事件處理函數(shù)名后面是否帶括號的問題
JS中的事件處理(事件綁定)就是讓某種或某些事件觸發(fā)某些活動(dòng)。有兩種常見的形式,分別是DOM Level 0 和DOM Level 2。今天總結(jié)一個(gè)關(guān)于事件處理程序的小細(xì)節(jié)。感興趣的朋友一起學(xué)習(xí)吧2016-11-11JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹(Binary Sort Tree)實(shí)例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹(Binary Sort Tree),結(jié)合實(shí)例形式詳細(xì)分析了二叉查找樹(Binary Sort Tree)的原理、定義、遍歷、查找、插入、刪除等常見操作技巧,需要的朋友可以參考下2019-08-08JS實(shí)現(xiàn)的簡單鼠標(biāo)跟隨DiV層效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的簡單鼠標(biāo)跟隨DiV層效果,涉及JavaScript基于時(shí)間函數(shù)動(dòng)態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10javascript利用初始化數(shù)據(jù)裝配模版的實(shí)現(xiàn)代碼
實(shí)現(xiàn)一個(gè)通用方法,使用初始化數(shù)據(jù)來裝配模版。需要的朋友可以參考下。2010-11-11