Home  >  Article  >  Web Front-end  >  JS implements a simple shopping cart with pictures and code

JS implements a simple shopping cart with pictures and code

高洛峰
高洛峰Original
2017-03-15 16:21:591622browse

As shown in the picture:

JS implements a simple shopping cart with pictures and code

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn