JavaScript實現(xiàn)簡單購物小表格
更新時間：2021年09月29日 09:37:56 作者：美食大戰(zhàn)老鼠
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)簡單購物小表格，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(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;">價錢</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">總價是：<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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于ES6入門教程之變量的解構(gòu)賦值的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
懶加載是一種優(yōu)化技術(shù),它可以延遲加載某些資源,直到它們真正需要被使用的時候才進行加載,實現(xiàn)懶加載的方法一般分為兩種：基于 Intersection Observer API 的懶加載和基于滾動事件的懶加載,本文給大家介紹JavaScript的懶加載處理方式,感興趣的朋友一起看看吧2023-10-10
js下將阿拉伯?dāng)?shù)字每三位一逗號分隔(如：15000000轉(zhuǎn)化為15,000,000)
這篇文章主要介紹了js下將阿拉伯?dāng)?shù)字每三位一逗號分隔(如：15000000轉(zhuǎn)化為15,000,000),需要的朋友可以參考下2014-06-06
這篇文章主要為大家詳細介紹了js實現(xiàn)時間日期校驗，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
JS中關(guān)于事件處理函數(shù)名后面是否帶括號的問題
JS中的事件處理（事件綁定）就是讓某種或某些事件觸發(fā)某些活動。有兩種常見的形式，分別是DOM Level 0 和DOM Level 2。今天總結(jié)一個關(guān)于事件處理程序的小細節(jié)。感興趣的朋友一起學(xué)習(xí)吧2016-11-11
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹（Binary Sort Tree）實例詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之二叉查找樹（Binary Sort Tree）,結(jié)合實例形式詳細分析了二叉查找樹（Binary Sort Tree）的原理、定義、遍歷、查找、插入、刪除等常見操作技巧,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了JS實現(xiàn)的簡單鼠標跟隨DiV層效果,涉及JavaScript基于時間函數(shù)動態(tài)操作頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10
javascript利用初始化數(shù)據(jù)裝配模版的實現(xiàn)代碼
實現(xiàn)一個通用方法，使用初始化數(shù)據(jù)來裝配模版。需要的朋友可以參考下。2010-11-11
在 JavaScript 中,new 關(guān)鍵字不僅是面向?qū)ο缶幊痰年P(guān)鍵要素,還是創(chuàng)建實例的重要手段,本文將深入探討 new 關(guān)鍵字的使用,理解它在對象創(chuàng)建和構(gòu)造函數(shù)調(diào)用中的作用,需要的朋友可以參考下2023-11-11
這篇文章主要為大家介紹了JavaScript之Array常見的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助V2021-11-11