Home > Developer > Web Develop
<! DOCTYPE html>
<meta charset= "Utf-8" >
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
<title> Shopping Cart Settlement </title>
<meta name= "description" content= "" >
<meta name= "keywords" content= "" >
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name= "format-detection" content= "Telephone=no"/>
<meta name= "renderer" content= "WebKit" >
<!--<! [endif]-->
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >
<style>
. Shop-total,
. all-total {
height:50px;
line-height:50px;
Font-weight:bold;
Color: #f00;
Float:left;
}
. One-shop,
. All-total,
. shop-total {
width:400px;
}
p {
margin:0;
}
. goods-check {
width:25px;
height:25px;
margin-top:5px;
}
. Goods-msg,
P
Label {
Float:left;
}
</style>
<body>
<!--a shop--
<div class= "One-shop" >
<!--one item--
<div class= "One-goods" >
<div class= "Goods-msg" >
<label for= "" >
<input type= "checkbox" class= "Goods-check Goodscheck" >
</label>
<button type= "button" class= "Minus" >-</button>
<input type= "text" class= "Am-num-text" value= "1"/>
<button type= "button" class= "Plus" >+</button>
</div>
<p> product Price: ￥<span class= "Shop-total-amount goodsprice" >20.00</span></p>
</div>
<!--one item--
<div class= "One-goods" >
<div class= "Goods-msg" >
<label for= "" >
<input type= "checkbox" class= "Goods-check Goodscheck" >
</label>
<button type= "button" class= "Minus" >-</button>
<input type= "text" class= "Am-num-text" value= "1"/>
<button type= "button" class= "Plus" >+</button>
</div>
<p> product Price: ￥<span class= "Shop-total-amount goodsprice" >9.90</span></p>
</div>
<!--one item--
<div class= "One-goods" >
<div class= "Goods-msg" >
<label for= "" >
<input type= "checkbox" class= "Goods-check Goodscheck" >
</label>
<button type= "button" class= "Minus" >-</button>
<input type= "text" class= "Am-num-text" value= "1"/>
<button type= "button" class= "Plus" >+</button>
</div>
<p> product Price: ￥<span class= "Shop-total-amount goodsprice" >10.00</span></p>
</div>
<!--stores Total--
<div class= "Shop-total" >
<label for= "" >
<input type= "checkbox" class= "Goods-check shopcheck" > shop Select All </label>
<p> Shop total: ￥<span class= "Shop-total-amount shoptotal" >0</span></p>
</div>
</div>
<!--a shop--
<div class= "One-shop" >
<!--one item--
<div class= "One-goods" >
<div class= "Goods-msg" >
<label for= "" >
<input type= "checkbox" class= "Goods-check Goodscheck" >
</label>
<button type= "button" class= "Minus" >-</button>
<input type= "text" class= "Am-num-text" value= "1"/>
<button type= "button" class= "Plus" >+</button>
</div>
<p> product Price: ￥<span class= "Shop-total-amount goodsprice" >30.00</span></p>
</div>
<!--one item--
<div class= "One-goods" >
<div class= "Goods-msg" >
<label for= "" >
<input type= "checkbox" class= "Goods-check Goodscheck" >
</label>
<button type= "button" class= "Minus" >-</button>
<input type= "text" class= "Am-num-text" value= "1"/>
<button type= "button" class= "Plus" >+</button>
</div>
<p> product Price: ￥<span class= "Shop-total-amount goodsprice" >20.00</span></p>
</div>
<!--stores Total--
<div class= "Shop-total" >
<label for= "" >
<input type= "checkbox" class= "Goods-check shopcheck" > shop Select All </label>
<p> Shop total: ￥<span class= "Shop-total-amount shoptotal" >0</span></p>
</div>
</div>
<!--Total-
<div class= "All-total" >
<label for= "" >
<input type= "checkbox" class= "Goods-check" id= "Allcheck" > select all </label>
Total <p> total: ￥<span class= "Shop-total-amount" id= "Alltotal" >0</span></p>
</div>
<script src= "Http://code.jquery.com/jquery-2.2.0.min.js" ></script>
<script>
Quantity minus
$ (". minus"). Click (function () {
var t = $ (this). Parent (). Find ('. Am-num-text ');
T.val (parseint (T.val ())-1);
if (T.val () <= 1) {
T.val (1);
}
Totalprice ();
});
Quantity Plus
$ (". Plus"). Click (function () {
var t = $ (this). Parent (). Find ('. Am-num-text ');
T.val (parseint (T.val ()) + 1);
if (T.val () <= 1) {
T.val (1);
}
Totalprice ();
});
Click the Products button
$(". Goodscheck "). Click (function () {
var goods = $ (this). Closest (". One-shop"). Find (". Goodscheck "); Get all products from our store
var GOODSC = $ (this). Closest (". One-shop"). Find (". Goodscheck:checked "); Get all selected items in our shop
var shops = $ (this). Closest (". One-shop"). Find (". Shopcheck "); Get the full selection button for this store
if (goods.length = = goodsc.length) {//If the selected item equals all items
Shops.prop (' checked ', true); The shop Select All button is selected
if ($ (". Shopcheck "). Length = = $ (". Shopcheck:checked "). (length) {//If the number of stores selected equals the number of all stores
$ ("#AllCheck"). Prop (' checked ', true); The Select All button is selected
Totalprice ();
} else {
$ ("#AllCheck"). Prop (' checked ', false); Else the Select All button is not selected
Totalprice ();
}
} else {//If the selected item is not equal to all items
Shops.prop (' checked ', false); Shop Select all buttons are not selected
$ ("#AllCheck"). Prop (' checked ', false); The Select All button will not be selected
Calculation
Totalprice ();
Calculation
}
});
Click the Store button
$(". Shopcheck "). Change (function () {
if ($ (this). Prop ("checked") = = True) {//If the store button is selected
$ (this). Parents (". One-shop"). Find (". Goods-check"). Prop (' checked ', true); All item buttons in the store are also selected
if ($ (". Shopcheck "). Length = = $ (". Shopcheck:checked "). (length) {//If the number of stores selected equals the number of all stores
$ ("#AllCheck"). Prop (' checked ', true); The Select All button is selected
Totalprice ();
} else {
$ ("#AllCheck"). Prop (' checked ', false); Else the Select All button is not selected
Totalprice ();
}
} else {//If the store button is not selected
$ (this). Parents (". One-shop"). Find (". Goods-check"). Prop (' checked ', false); All items in the shop are not selected at all
$ ("#AllCheck"). Prop (' checked ', false); The Select All button will not be selected
Totalprice ();
}
});
Click the Select All button
$ ("#AllCheck"). Click (function () {
if ($ (this). Prop ("checked") = = True) {//If the Select All button is selected
$ (". Goods-check"). Prop (' checked ', true); All buttons are selected
Totalprice ();
} else {
$ (". Goods-check"). Prop (' checked ', false); Else all buttons are not selected completely
Totalprice ();
}
$(". Shopcheck "). Change (); Perform shop-wide selection operations
});
function Totalprice () {
var allprice = 0; Price
$ (". One-shop"). each (function () {//loop each store
var oprice = 0; Total Store Price
$ (this). Find (". Goodscheck "). each (function () {//Recycle store Products
if ($ (this). Is (": Checked")) {//If the item is selected
var num = parseint ($ (this). Parents (". One-goods"). Find (". Am-num-text"). Val ()); Get the number of goods
var price = parsefloat ($ (this). Parents (". One-goods"). Find (". Goodsprice "). Text ()); Get the price of a product
var total = Price * NUM; Calculate the total price of a single item
Oprice + = total; Calculate the total price of the store
}
$ (this). Closest (". One-shop"). Find (". Shoptotal "). Text (oprice.tofixed (2)); Show store Total price for selected items
});
var oneprice = parsefloat ($ (this). Find (". Shoptotal "). Text ()); Get the total price of each store
Allprice + = Oneprice; Calculate the total price of all stores
});
$ ("#AllTotal"). Text (allprice.tofixed (2)); Output full price
}
</script>
</body>
Shopping cart jquery number plus minus + Total price calculation
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
