JS implements a simple shopping cart with pictures and code

As shown in the picture:

The implementation of the select all button is:

<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>

The last span tag is used to store the area that displays the total amount.

The code to implement the two "select all" functions is:

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 implements the acquisition of the response event button.

The for loop modifies the checked attribute of each multi-select box.

The method for calculating the total amount is:

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); 
}

Add the values ​​of all selected check boxes.

For more articles related to JS implementation of simple shopping cart with pictures and codes, please pay attention to the PHP Chinese website!

Related articles:

Principles of novice shopping cart implementation in php

jQuery method of implementing shopping cart based on json and cookie

Native js simulation Taobao shopping cart project actual combat

php realizes simple adding to the shopping cart Detailed introduction of graphic code