js實現(xiàn)簡單的購物車有圖有代碼
更新時間：2014年05月26日 09:24:22 作者：
這篇文章主要介紹了用js實現(xiàn)的簡單購物車，配有截圖，適合初學者
如圖：
全選按鈕的實現(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標簽是用來存放顯示總金額的區(qū)域。
實現(xiàn)兩個“全選”功能的代碼是：
function checkAll()
{
//var allNode = document.getElementsByName("all")[0];
//獲取被點擊的元素
var allNode = event.srcElement;
var item = document.getElementsByName("item");
for(var x=0;x<item.length;x++)
{
item[x].checked = allNode.checked;
}
}
event.srcElement實現(xiàn)了對響應事件按鈕的獲取。
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);
}
將所有被選中的復選框的value值加起來。
全選按鈕的實現(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標簽是用來存放顯示總金額的區(qū)域。
實現(xiàn)兩個“全選”功能的代碼是：
復制代碼 代碼如下:
function checkAll()
{
//var allNode = document.getElementsByName("all")[0];
//獲取被點擊的元素
var allNode = event.srcElement;
var item = document.getElementsByName("item");
for(var x=0;x<item.length;x++)
{
item[x].checked = allNode.checked;
}
}
event.srcElement實現(xiàn)了對響應事件按鈕的獲取。
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);
}
將所有被選中的復選框的value值加起來。
相關文章
這篇文章主要為大家詳細介紹了javaScript數(shù)組迭代方法，ECMAScript5為數(shù)組定義了5個迭代方法，感興趣的小伙伴們可以參考一下2016-04-04
webpack是近期最火的一款模塊加載器兼打包工具，它能把各種資源，例如JS（含JSX）、coffee、樣式（含less/sass）、圖片等都作為模塊來使用和處理。這篇文章主要給大家總結介紹了關于webpack學習教程之前端性能優(yōu)化的相關資料，需要的朋友可以參考下。2017-12-12
JavaScript實現(xiàn)動態(tài)表格的方法詳解
這篇文章主要為大家介紹了JavaScript實現(xiàn)動態(tài)表格的方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-01-01
這篇文章主要介紹了JS實現(xiàn)漂亮的時間選擇框效果,結合實例形式分析了javascript時間選擇框插件的實現(xiàn)與使用方法,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了JavaScript設計模式之裝飾者模式介紹,通一個類來動態(tài)的對另一個類的功能對象進行前或后的修飾，給它輔加一些額外的功能; 這是對一個類對象功能的裝飾，裝飾的類跟被裝飾的類，要求擁有相同的訪問接口方法（功能）,需要的朋友可以參考下2014-12-12
這篇文章主要介紹了ES6新數(shù)據(jù)結構Map功能與用法,結合實例形式分析了Map的功能、使用方法及相關注意事項,需要的朋友可以參考下2017-03-03
這篇文章主要介紹了JS實現(xiàn)三級折疊菜單特效，其它級可自動收縮,需要的朋友可以參考下2015-08-08
這篇文章主要為大家詳細介紹了Bootstrap標簽頁（Tab）插件的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
微信小程序使用form表單獲取輸入框數(shù)據(jù)的實例代碼
這篇文章主要介紹了微信小程序使用form表單獲取輸入框數(shù)據(jù)的實例代碼，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
javascript實現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效
這篇文章主要介紹了javascript實現(xiàn)帶節(jié)日和農(nóng)歷的日歷特效,效果十分棒，需要的朋友可以參考下2015-02-02