SoFunction
Updated on 2025-04-10

Use jQuery to implement shopping cart checkout function

This article shares the specific code for jQuery to realize the shopping cart settlement function for your reference. The specific content is as follows

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript" src="js/jquery-1.8." ></script>
    <script>
    /*delete*/
      $(function(){
  $(".blue").bind("click",function(){
    $(this).parent().parent().remove();
    totalPrice();
  });

  /*When the mouse leaves the text box, get the current value and call the totalPrice() function for settlement*/
  $(".shopping_product_list_5 input").bind("blur",function(){
    var t = $(this).val();
    totalPrice(); 
  });
  var allPrice = 0;
  var allReduce = 0;
  var allCount = 0;

  $("#myTableProduct tr").each(function(){  /*Cycle every line of the shopping cart list*/
    var num = parseInt($(this).find(".shopping_product_list_5 input").val());  /*Get the quantity value in the text box*/
    var price = parseFloat($(this).find(".shopping_product_list_4 label").text()); /* Get product price*/
    var total = price * num;
    allPrice += total; /*Calculate the total price of all items*/

    /*Get savings
    var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
    var reducePrice = reduce*num;
    allReduce +=reducePrice;

    /*Get points*/
    var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
    allCount +=count;
  });
  $("#product_total").text((2)); /*Fill in the calculation result, where two decimal places are retained using the toFixed() function*/
  $("#product_save").text((2));
  $("#product_integral").text((2));
});
 function totalPrice(){
  var allPrice = 0;
  var allReduce = 0;
  var allCount = 0;
  $("#myTableProduct tr").each(function(){
    var num = parseInt($(this).find(".shopping_product_list_5 input").val());
    var price = parseFloat($(this).find(".shopping_product_list_4 label").text());
    var total = price * num;
    allPrice += total;

    var reduce = parseFloat($(this).find(".shopping_product_list_3 label").text()) - parseFloat($(this).find(".shopping_product_list_4 label").text());
    var reducePrice = reduce*num;
    allReduce +=reducePrice;

    var count = parseFloat($(this).find(".shopping_product_list_2 label").text());
    allCount +=count;
  });
  $("#product_total").text((2));
  $("#product_save").text((2));
  $("#product_integral").text((2));
 }
    </script>
  </head>
  <body>
    <div class="shopping_list_top">You have purchased the following products</div>
  <div class="shopping_list_border">
    <table width="100%" border="1px solid #ccc" >
      <tr class="shopping_list_title" >
        <td class="shopping_list_title_1">Product Name</td>
        <td class="shopping_list_title_2">Single product points</td>
        <td class="shopping_list_title_3">Market price</td>
        <td class="shopping_list_title_4">Dangdang Price</td>
        <td class="shopping_list_title_5">quantity</td>
        <td class="shopping_list_title_6">delete</td>
      </tr>
    </table>
    <table width="100%" border="1px solid #ccc" >

      <tr class="shopping_product_list" >
        &lt;td class="shopping_product_list_1"&gt;&lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">Private equity (the first financial that discloses the secrets of capital game...</a></td>        &lt;td class="shopping_product_list_2"&gt;&lt;label&gt;189&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_3"&gt;￥&lt;label&gt;32.00&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_4"&gt;￥&lt;label&gt;18.90 &lt;/label&gt;(59fold)&lt;/td&gt;
        &lt;td class="shopping_product_list_5"&gt;&lt;input type="text" value="1"/&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_6"&gt;&lt;a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue"&gt;delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="shopping_product_list" &gt;
        &lt;td class="shopping_product_list_1"&gt;&lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue"> Xiao Renyuan (Zhang Ailing's most mysterious novel manuscript)</a></td>        &lt;td class="shopping_product_list_2"&gt;&lt;label&gt;173&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_3"&gt;￥&lt;label&gt;28.00&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_4"&gt;￥&lt;label&gt;17.30&lt;/label&gt;(62fold)&lt;/td&gt;
        &lt;td class="shopping_product_list_5"&gt;&lt;input type="text" value="1"/&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_6"&gt;&lt;a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue"&gt;delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="shopping_product_list" &gt;
        &lt;td class="shopping_product_list_1"&gt;&lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">The world without complaining (the world of 80 best-selling countries around the world...</a></td>        &lt;td class="shopping_product_list_2"&gt;&lt;label&gt;154&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_3"&gt;￥&lt;label&gt;24.80&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_4"&gt;￥&lt;label&gt;15.40&lt;/label&gt; (62fold)&lt;/td&gt;
        &lt;td class="shopping_product_list_5"&gt;&lt;input type="text" value="2"/&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_6"&gt;&lt;a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue"&gt;delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="shopping_product_list" &gt;
        &lt;td class="shopping_product_list_1"&gt;&lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">Fomat Double Bucket Washing Machine XPB20-07S</a></td>        &lt;td class="shopping_product_list_2"&gt;&lt;label&gt;358&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_3"&gt;￥&lt;label&gt;458.00&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_4"&gt;￥&lt;label&gt;358.00&lt;/label&gt; (78fold)&lt;/td&gt;
        &lt;td class="shopping_product_list_5"&gt;&lt;input type="text" value="1"/&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_6"&gt;&lt;a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue"&gt;delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="shopping_product_list" &gt;
        &lt;td class="shopping_product_list_1"&gt;&lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">PHP and MySQL Web Development (Original Book, 4th Edition)</a></td>        &lt;td class="shopping_product_list_2"&gt;&lt;label&gt;712&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_3"&gt;￥&lt;label&gt;95.00&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_4"&gt;￥&lt;label&gt;71.20&lt;/label&gt; (75fold)&lt;/td&gt;
        &lt;td class="shopping_product_list_5"&gt;&lt;input type="text" value="1"/&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_6"&gt;&lt;a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue"&gt;delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr class="shopping_product_list" &gt;
        &lt;td class="shopping_product_list_1"&gt;&lt;a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue">Fabour Insect Note</a> (Buy ￥68.30 and you can participate in the "10 yuan cash discount for every 199 yuan" event)</td>        &lt;td class="shopping_product_list_2"&gt;&lt;label&gt;10&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_3"&gt;￥&lt;label&gt;198.00&lt;/label&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_4"&gt;￥&lt;label&gt;130.70&lt;/label&gt; (66fold)&lt;/td&gt;
        &lt;td class="shopping_product_list_5"&gt;&lt;input type="text" value="1"/&gt;&lt;/td&gt;
        &lt;td class="shopping_product_list_6"&gt;&lt;a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="blue"&gt;delete&lt;/a&gt;&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;div class="shopping_list_end"&gt;
      &lt;div&gt;&lt;a  href="javascript:void(0);" rel="external nofollow" &gt;Clear the shopping cart&lt;/a&gt;&lt;/div&gt;
      &lt;ul&gt;
        &lt;li class="shopping_list_end_1"&gt;&lt;input name="" type="image" src="images/shopping_balance.gif"/&gt;&lt;/li&gt;
        &lt;li class="shopping_list_end_2"&gt;￥&lt;label &gt;&lt;/label&gt;&lt;/li&gt;
        &lt;li class="shopping_list_end_3"&gt;Total product amount：&lt;/li&gt;
        &lt;li class="shopping_list_end_4"&gt;You save a total of money：￥&lt;label class="shopping_list_end_yellow" &gt;&lt;/label&gt;&lt;br/&gt;
          Get product points：&lt;label class="shopping_list_end_yellow" &gt;&lt;/label&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.