js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車有圖有代碼

全選按鈕的實(shí)現(xiàn)為:
<input type="checkbox" name="all" onclick="checkAll()" />全選<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="item" value="3000" />筆記本電腦:3000元<br />
<input type="checkbox" name="all" onclick="checkAll()" />全選<br />
<input type="button" value="獲取總金額" onclick="getSum()" />
<span id="sum"></span>
最后的span標(biāo)簽是用來存放顯示總金額的區(qū)域。
實(shí)現(xiàn)兩個(gè)“全選”功能的代碼是:
function checkAll()
{
//var allNode = document.getElementsByName("all")[0];
//獲取被點(diǎn)擊的元素
var allNode = event.srcElement;
var item = document.getElementsByName("item");
for(var x=0;x<item.length;x++)
{
item[x].checked = allNode.checked;
}
}
event.srcElement實(shí)現(xiàn)了對(duì)響應(yīng)事件按鈕的獲取。
for循環(huán)將每個(gè)多選框修改checked屬性。
計(jì)算總金額的方法為:
function getSum()
{
var item = document.getElementsByName("item");
var sum = 0;
for(var x=0;x<item.length;x++)
{
if(item[x].checked)
{
sum+=parseInt(item[x].value);
}
}
var spanNode = document.getElementById("sum");
spanNode.innerHTML = (sum+"元").fontsize(7);
}
將所有被選中的復(fù)選框的value值加起來。
- vuejs手把手教你寫一個(gè)完整的購(gòu)物車實(shí)例代碼
- js購(gòu)物車實(shí)現(xiàn)思路及代碼(個(gè)人感覺不錯(cuò))
- JavaScript編寫一個(gè)簡(jiǎn)易購(gòu)物車功能
- Javascript實(shí)現(xiàn)購(gòu)物車功能的詳細(xì)代碼
- Jsp+Servlet實(shí)現(xiàn)購(gòu)物車功能
- 原生js模擬淘寶購(gòu)物車項(xiàng)目實(shí)戰(zhàn)
- Javascript操縱Cookie實(shí)現(xiàn)購(gòu)物車程序
- 簡(jiǎn)單的前端js+ajax 購(gòu)物車框架(入門篇)
- js實(shí)現(xiàn)購(gòu)物車功能
- JavaScript實(shí)現(xiàn)淘寶購(gòu)物件數(shù)選擇
相關(guān)文章
webpack學(xué)習(xí)教程之前端性能優(yōu)化總結(jié)
webpack是近期最火的一款模塊加載器兼打包工具,它能把各種資源,例如JS(含JSX)、coffee、樣式(含less/sass)、圖片等都作為模塊來使用和處理。這篇文章主要給大家總結(jié)介紹了關(guān)于webpack學(xué)習(xí)教程之前端性能優(yōu)化的相關(guān)資料,需要的朋友可以參考下。2017-12-12JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法詳解
這篇文章主要為大家介紹了JavaScript實(shí)現(xiàn)動(dòng)態(tài)表格的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-01-01JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果
這篇文章主要介紹了JS實(shí)現(xiàn)漂亮的時(shí)間選擇框效果,結(jié)合實(shí)例形式分析了javascript時(shí)間選擇框插件的實(shí)現(xiàn)與使用方法,需要的朋友可以參考下2016-08-08JavaScript設(shè)計(jì)模式之裝飾者模式介紹
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之裝飾者模式介紹,通一個(gè)類來動(dòng)態(tài)的對(duì)另一個(gè)類的功能對(duì)象進(jìn)行前或后的修飾,給它輔加一些額外的功能; 這是對(duì)一個(gè)類對(duì)象功能的裝飾,裝飾的類跟被裝飾的類,要求擁有相同的訪問接口方法(功能),需要的朋友可以參考下2014-12-12ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法,結(jié)合實(shí)例形式分析了Map的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2017-03-03JS實(shí)現(xiàn)三級(jí)折疊菜單特效,其它級(jí)可自動(dòng)收縮
這篇文章主要介紹了JS實(shí)現(xiàn)三級(jí)折疊菜單特效,其它級(jí)可自動(dòng)收縮,需要的朋友可以參考下2015-08-08Bootstrap標(biāo)簽頁(yè)(Tab)插件使用方法
這篇文章主要為大家詳細(xì)介紹了Bootstrap標(biāo)簽頁(yè)(Tab)插件的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-03-03微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了微信小程序使用form表單獲取輸入框數(shù)據(jù)的實(shí)例代碼,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05javascript實(shí)現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效
這篇文章主要介紹了javascript實(shí)現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效,效果十分棒,需要的朋友可以參考下2015-02-02