js實作簡單的購物車有圖有程式碼_javascript技巧

如圖：
 
全選按鈕的實作為：

複製程式碼

複製程式碼

程式碼如下

全選

筆記型電腦：3000元

筆記型電腦：3000元

筆記型電腦：3000元

筆記本電腦：3000元

筆記型電腦：3000元

筆記型電腦：3000元

筆記型電腦：3000元

筆記型電腦：3000元

筆記型電腦：3000元

筆記型電腦：3000元

全選

最後的span標籤是用來存放顯示總金額的區域。

實作兩個「全選」功能的程式碼是： 複製程式碼

程式碼如下:


function checkAll()
{
//var allNode = document.getElementsByName("all")[0];
//取得被點擊的元素
var allNode = event.srcElement;
var item = document.getElementsByName("item");
for(var x=0;x{
item[x].checked = allNode.checked;

}
}


event.srcElement實作了回應事件按鈕的取得。

for迴圈將每個多選框修改checked屬性。

計算總金額的方法為： 複製代碼

代碼如下:



代碼如下:



>function getSum()
{
var item = document.getElementsByName("item");
var sum = 0;
for(var x=0;x{
if(item[x].checked)

{
sum =parseInt(item[x].value); } } var spanNode = document .getElementById("sum"); spanNode.innerHTML = (sum "元").fontsize(7); } 將所有選取的複選框的value值加起來。