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