js實(shí)現(xiàn)簡(jiǎn)單的購(gòu)物車有圖有代碼
更新時(shí)間：2014年05月26日 09:24:22 作者：
這篇文章主要介紹了用js實(shí)現(xiàn)的簡(jiǎn)單購(gòu)物車，配有截圖，適合初學(xué)者
如圖：
全選按鈕的實(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)簽是用來(lái)存放顯示總金額的區(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值加起來(lái)。
全選按鈕的實(shí)現(xiàn)為：
復(fù)制代碼 代碼如下:
<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)簽是用來(lái)存放顯示總金額的區(qū)域。
實(shí)現(xiàn)兩個(gè)“全選”功能的代碼是：
復(fù)制代碼 代碼如下:
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ì)算總金額的方法為：
復(fù)制代碼 代碼如下:
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值加起來(lái)。
相關(guān)文章
uniapp中scroll-view基礎(chǔ)用法示例代碼
我們?cè)陧?xiàng)目中往往都能遇到實(shí)現(xiàn)左右滑動(dòng)跟上下滑動(dòng)的需求,下面這篇文章主要給大家介紹了關(guān)于uniapp中scroll-view基礎(chǔ)用法的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
常見(jiàn)的原始JS選擇器有g(shù)etElementById，getElementsByName，getElementsByTagName，就使用上為大家總結(jié)下2014-04-04
layer.open 按鈕的點(diǎn)擊事件關(guān)閉方法
今天小編就為大家分享一篇layer.open 按鈕的點(diǎn)擊事件關(guān)閉方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
微信小程序開(kāi)發(fā)實(shí)用技巧之?dāng)?shù)據(jù)傳遞和存儲(chǔ)
數(shù)據(jù)傳遞與存儲(chǔ)是我們?cè)谌粘ｉ_(kāi)發(fā)中遇到的再正常不過(guò)的一個(gè)需求， 這篇文章主要給大家介紹了關(guān)于微信小程序開(kāi)發(fā)實(shí)用技巧之?dāng)?shù)據(jù)傳遞和存儲(chǔ)的相關(guān)資料，需要的朋友可以參考下2021-05-05
這篇文章主要介紹了詳解微信小程序圖片地扯轉(zhuǎn)base64解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
document.getElementById方法在Firefox與IE中的區(qū)別
相信很多朋友在寫JavaScript的時(shí)候，對(duì)瀏覽器的兼容問(wèn)題會(huì)感到很頭疼。這不，煩什么，什么就來(lái)了，特記錄下來(lái)，與大家分享。2010-05-05
在javascript中javascript:void(0)經(jīng)常會(huì)用到，大家知道此含有嗎，在Javascript中void是一個(gè)操作符，該操作符指定要計(jì)算一個(gè)表達(dá)式但是不返回值，本文給大家介紹js中javascript:void(0) 真正含義，需要的朋友可以參考下2015-08-08
基于JavaScript實(shí)現(xiàn)自動(dòng)更新倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了基于JavaScript實(shí)現(xiàn)自動(dòng)更新倒計(jì)時(shí)效果，元旦倒計(jì)時(shí)代碼分享，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JavaScript檢測(cè)并限制復(fù)選框選中個(gè)數(shù)的方法
這篇文章主要介紹了JavaScript檢測(cè)并限制復(fù)選框選中個(gè)數(shù)的方法,涉及javascript針對(duì)復(fù)選框的判定與運(yùn)算相關(guān)技巧,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
網(wǎng)頁(yè)實(shí)時(shí)顯示服務(wù)器時(shí)間和javscript自運(yùn)行時(shí)鐘
如果每秒通過(guò)ajax加載服務(wù)器時(shí)間的話，就會(huì)產(chǎn)生大量的請(qǐng)求，于是打算使用js 來(lái)解決這個(gè)需求2014-06-06