Home > Web Front-end > JS Tutorial > body text

js implements a simple shopping cart with pictures and code_javascript skills

WBOY
Release: 2016-05-16 16:46:56
Original
1207 people have browsed it

As shown in the picture:
js implements a simple shopping cart with pictures and code_javascript skills
The implementation of the select all button is:

Copy the code The code is as follows:

Select all

Laptop: 3,000 yuan

Laptop: 3000 yuan

Laptop: 3000 yuan

Laptop: 3000 yuan

Laptop: 3,000 yuan

Laptop: 3,000 yuan

Laptop: 3000 yuan

Laptop: 3000 yuan

Laptop: 3000 yuan

Laptop: 3000 yuan

Select all




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:
Copy the code The code is as follows:

function checkAll()
{
//var allNode = document.getElementsByName("all")[0];
//Get the clicked element
var allNode = event.srcElement;
var item = document.getElementsByName("item");
for(var x=0;x{
item[x].checked = allNode.checked;
}
}

event.srcElement implements the acquisition of response event buttons.

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

The method for calculating the total amount is:
Copy the code The code is as follows:

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

Convert the value of all selected check boxes The values ​​add up.
Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template