Click Increase or decrease the number of items and automatically calculate the total price:
This section describes how to implement a click button to add or remove quantities of items, and to automatically calculate the total price of a product.
The code example is as follows:
<!DOCTYPE HTML> <HTML> <Head> <MetaCharSet= "Utf-8"> <Metaname= "Author"content= "http://www.softwhy.com/" /> <title>Ant Tribe</title> <styletype= "Text/css">span{Color:Red;cursor:Pointer;}</style><Scripttype= "Text/javascript"src= "Mytest/jquery/jquery-1.8.3.js"></Script><Scripttype= "Text/javascript">$(function(){ $("#quantity"). KeyUp (function(){ if(IsNaN ($ ( This). Val ())||parseint ($ ( This). Val ())<1){ $( This). Val ("1"); $("#totalPrice"). HTML ($ ("#price"). Val ()); return; } var Total=parsefloat ($ ("#price"). Val ())*parseint ($ ( This). Val ()); $("#totalPrice"). HTML (total.tofixed (2)); }) $("#add"). Click (function() {numadd (); }); $("#del"). Click (function() {Numdec (); });})/*number of items +1*/functionNumadd () {varNum_add=parseint ($ ("#quantity"). Val ())+1; if($("#quantity"). Val ()=="") {Num_add= 1; } $("#quantity"). Val (Num_add); var Total=parsefloat ($ ("#price"). Val ())*parseint ($ ("#quantity"). Val ()); $("#totalPrice"). HTML (total.tofixed (2));}/*number of items-1*/functionNumdec () {varNum_dec=parseint ($ ("#quantity"). Val ())-1; if(Num_dec<1){ //Purchase quantity must be greater than or equal to 1Alert ("Not LT 1"); } Else{ $("#quantity"). Val (Num_dec); var Total=parsefloat ($ ("#price"). Val ())*parseint ($ ("#quantity"). Val ()); $("#totalPrice"). HTML (total.tofixed (2)); }}</Script></Head><Body><P>Quantity:<spanID= "Del">-</span> <inputtype= "text"ID= "Quantity" /> <spanID= "Add">+</span></P><Pclass= "SDSD">Total Price:<spanID= "Totalprice">28.10</span></P><inputtype= "hidden"value= "28.1"ID= "Price" /></Body></HTML>
In the above code, click the left and right button can achieve the increase or decrease of the above, and can automatically calculate the total price, in the text box manually write the amount of time can also automatically calculate the total price, the following describes its implementation process:
A. Code Comment:
1.$ (function () {}), when the document structure is fully loaded and then executes the code in the function.
2.$ ("#quantity"). KeyUp (function () {}), register the KeyUp event handler for the text box.
3.if (IsNaN ($ (this). val ()) | | parseint (This). Val ()) <1 to determine whether the content in the text box is not a number or less than 1.
4.$ (This). Val ("1"), set the contents of the text box to 1.
5.$ ("#totalPrice"). HTML ($ ("#price"). Val ()), set the content of the span element that displays the price to the price provided by the value of the id attribute.
6.return, jump out of the function execution.
7.var total=parsefloat ($ ("#price"). Val ()) *parseint ($ (this). Val ()), calculates the total price of the commodity.
8.$ ("#totalPrice"). HTML (total.tofixed (2)), writes the total price to the SPAN element.
9.$ ("#add"). Click (function () {}), register the event handler, and click to add the number of items.
10.$ ("#del"). Click (function () {}), register the event handler, and click to delete the item quantity.
11.function Numadd () {}, this function can add an item quantity and be able to automatically calculate the total price.
12.var Num_add = parseint ($ ("#quantity"). Val ()) +1, add 1 to the text box numeric value.
13.if ($ ("#quantity"). val () = = "") {Num_add = 1;} If the contents of the text box are empty, set the Num_add value to 1.
14.$ ("#quantity"). Val (Num_add), sets the value of the text box.
15.var total = parsefloat ($ ("#price"). Val ()) *parseint ($ ("#quantity"). Val ()), calculates the overall price.
16.$ ("#totalPrice"). HTML (total.tofixed (2)), holding two decimal places on the price, and writing to span.
two. Related reading:
The 1.isNaN () function can be found in theJavaScript's isNaN () methodA chapter.
The 2.parseInt () function can be found in theJavaScript's parseint () functionA chapter.
The 3.html () function can be found in thejquery's HTML () methodA chapter.
The 4.parseFloat () function can be found in theJavaScript's parsefloat () methodA chapter.
The 5.toFixed () function can be found in theThe tofixed () method of the Number object for JavaScriptA chapter.
The original address is: http://www.softwhy.com/forum.php?mod=viewthread&tid=13693
For more information, refer to: http://www.softwhy.com/jquery/
Click to increase or decrease the number of items and automatically calculate the total price
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
