Js implementation of a simple shopping cart has a diagram has code

  • 2020-03-30 03:02:52
  • OfStack

As shown in figure:
< img SRC = "border = 0 / / files.jb51.net/file_images/article/201405/201405260924131.gif? 201442692444 ">  
The implementation of all selected buttons is:
 
<input type="checkbox" name="all" onclick="checkAll()" /> Future generations <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="item" value="3000" /> Laptop: 3000 yuan <br /> 
<input type="checkbox" name="all" onclick="checkAll()" /> Future generations <br /> 
<input type="button" value=" Get the total amount " onclick="getSum()" /> 
<span id="sum"></span> 

The last span TAB is used to hold the area that shows the total amount.

The code to implement the two "select all" functions is:
 
function checkAll() 
{ 
//var allNode = document.getElementsByName("all")[0]; 
//Gets the clicked element
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 retrieval of the response event button.

The for loop modifies the checked property for each checkbox.

The total amount is calculated by:
 
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+" yuan ").fontsize(7); 
} 

Adds the values of all selected check boxes.

Related articles: