JS to implement special shopping cart Effects

This article mainly shares the sample code for implementing shopping cart effects using JavaScript. It has good reference value. Let's take a look at the effect with the small Editor below:

1. Click the Select All button.

2. Click "+"-"to automatically calculate the number. And the total value is updated. '-' Appears when the number is greater than 1. '-' Disappears when the value is less than or equal to 1

3. Click Delete to delete the file.

4. Click the delete button next to select all to delete all.

5. After selecting a product, click the selected product to display the selected product.

6. You can deselect the selected item.

  
   Shopping Cart
 
 
  
  
  
 
   
 
    
Select All
 
    
Product
 
    
Unit Price
 
    
Quantity
 
    
Subtotal
 
    
Operation
 
   
 
  
  
  
  
 
   
 
    
 
    
Casio/Casio EX-TR350
 
    
5999.88
 
    
 +
 
    
5999.88
 
    
Delete
 
   
 
   
 
    
 
    
Canon/Canon PowerShot SX50 HS
 
    
3888.50
 
    
+
 
    
3888.50
 
    
Delete
 
   
 
   
 
    
 
    
Sony/DSC-WX300
 
    
1428.50
 
    
+
 
    
1428.50
 
    
Delete
 
   
 
   
 
    
 
    
Fujitsu/Fuji instax mini 25
 
    
640.60
 
    
+
 
    
640.60
 
    
Delete
 
   
 
  
 
 
  Select AllDelete
Close Calculation
  
Total: ￥0.00
  
0 items selected ︽︾
  
    
      
      
◆
Script window. onload = function () {if (! Document. getElementsByClassName) {document. getElementsByClassName = function (cls) {var ret = []; var els = document. getElementsByTagName ('*'); for (var I = 0, len = els. length; I <len; I ++) {if (els [I]. className = cls | els [I]. className. indexOf (cls + '')> = 0 | els [I]. className. indexOf (''+ cls +'')> = 0 | els [I]. className. indexOf (''+ cls)> = 0) {ret. push (els [I]) ;}} return ret ;}} var cartTable = document. getElementById ('carttable'); var tr = cartTable. children [1]. rows; var checkInputs = document. getElementsByClassName ('check'); var checkAllInputs = document. getElementsByClassName ('check-all'); var selectedTotal = document. getElementById ('selectedtotal'); var priceTotal = document. getElementById ('pricetotal'); var selected = document. getElementById ('selected'); var foot = document. getElementById ('foot'); var selectedViewList = document. getElementById ('selectedviewlist'); var deleteAll = document. getElementById ('deleteall'); // calculate function getTotal () {var seleted = 0; var price = 0; var HTMLstr = ''; for (var I = 0, len = tr. length; I <len; I ++) {if (tr [I]. getElementsByTagName ('input') [0]. checked) {tr [I]. className = 'on'; seleted + = parseInt (tr [I]. getElementsByTagName ('input') [1]. value); price + = parseFloat (tr [I]. cells [4]. innerHTML); HTMLstr + ='
Deselect
'} Else {tr [I]. className = '';} selectedTotal. innerHTML = seleted; priceTotal. innerHTML = price. toFixed (2); selectedViewList. innerHTML = HTMLstr; if (seleted = 0) {foot. className = 'foot'; }}// subtotal function getSubTotal (tr) {var tds = tr. cells; var price = parseFloat (tds [2]. innerHTML); var count = parseInt (tr. getElementsByTagName ('input') [1]. value); var SubTotal = parseFloat (price * count ); Tds [4]. innerHTML = SubTotal. toFixed (2);} for (var I = 0, len = checkInputs. length; I <len; I ++) {checkInputs [I]. onclick = function () {if (this. className = 'check-all check') {for (var j = 0; j <checkInputs. length; j ++) {checkInputs [j]. checked = this. checked ;}} if (this. checked = false) {for (var k = 0; k <checkAllInputs. length; k ++) {checkAllInputs [k]. checked = false ;}} getTotal () ;}} Selected. onclick = function () {if (foot. className = 'foot') {if (selectedTotal. innerHTML! = 0) {foot. className = 'foot show ';} else {foot. className = 'foot';} selectedViewList. onclick = function (e) {e = e | window. event; var el = e. srcElement; if (el. className = 'del ') {var index = el. getAttribute ('index'); var input = tr [index]. getElementsByTagName ('input') [0]; input. checked = false; input. onclick () ;}for (var I = 0; I <tr. length; I ++) {tr [I]. onclick = function (e ){ E = e | window. event; var el = e. srcElement; var cls = el. className; var input = this. getElementsByTagName ('input') [1]; var val = parseInt (input. value); var reduce = this. getElementsByTagName ('span ') [1]; switch (cls) {case 'add': input. value = val + 1; reduce. innerHTML = '-'; getSubTotal (this); break; case 'reduce': if (val> 1) {input. value = val-1;} if (input. value <= 1) {reduce. innerHTML = '';} GetSubTotal (this); break; case 'delete': var conf = confirm ('Are you sure you want to delete it? '); If (conf) {this. parentNode. removeChild (this);} break default: break;} getTotal ();} tr [I]. getElementsByTagName ('input') [1]. onkeyup = function () {var val = parseInt (this. value); var tr = this. parentNode. parentNode var reduce = tr. getElementsByTagName ('span ') [1]; if (isNaN (val) | val <1) {val = 1;} this. value = val; if (val <= 1) {reduce. innerHTML = '';} else {reduce. innerHTML = '-';} GetSubTotal (tr); getTotal () ;}} deleteAll. onclick = function () {if (selectedTotal. innerHTML! = '0') {var conf = confirm ('Are you sure you want to delete it? '); If (conf) {for (var I = 0; I <tr. length; I ++) {var input = tr [I]. getElementsByTagName ('input') [0]; if (input. checked) {tr [I]. parentNode. removeChild (tr [I]); I -- ;}}} checkAllInputs [0]. checked = true; checkAllInputs [0]. onclick ();} script

The above is all the content of this article. I hope this article will help you in your study or work, and I also hope to support PHP!

For more articles about how JS achieves special shopping cart effects, please follow the PHP Chinese network!