js實(shí)現(xiàn)簡(jiǎn)單的購物車有圖有代碼
更新時(shí)間:2014年05月26日 09:24:22 作者:
這篇文章主要介紹了用js實(shí)現(xiàn)的簡(jiǎ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)兩個(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值加起來。

全選按鈕的實(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)兩個(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值加起來。
相關(guān)文章
原生JS利用transform實(shí)現(xiàn)banner的無限滾動(dòng)示例代碼
這篇文章主要介紹了原生JS利用transform實(shí)現(xiàn)banner的無限滾動(dòng)示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06JavaScript實(shí)現(xiàn)阿拉伯?dāng)?shù)字和中文數(shù)字互相轉(zhuǎn)換
JavaScript實(shí)現(xiàn)阿拉伯?dāng)?shù)字和中文數(shù)字互相轉(zhuǎn)換可以用數(shù)組的循環(huán)檢測(cè)后的替換來實(shí)現(xiàn),下面主要講解其中的一些核心算法:2016-06-06如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果
我將用最通俗的語言和最簡(jiǎn)潔的代碼給大家演示如何創(chuàng)建一個(gè)JavaScript彈出DIV窗口層的效果2013-09-09JS+XML 省份和城市之間的聯(lián)動(dòng)實(shí)現(xiàn)代碼
用JS來操作一個(gè)XML文檔來實(shí)現(xiàn)一個(gè)簡(jiǎn)單的表單聯(lián)動(dòng)2009-10-10怎樣用JavaScript實(shí)現(xiàn)原型模式
這篇文章主要介紹了怎樣用JavaScript實(shí)現(xiàn)原型模式,想學(xué)習(xí)設(shè)計(jì)模式的同學(xué),可以參考下2021-04-04IE event.srcElement和FF event.target 功能比較
可以捕獲當(dāng)前事件作用的對(duì)象,如event.srcElement.tagName可以捕獲活動(dòng)標(biāo)記名稱。2010-03-03