jQuery realizes the full function of shopping cart

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

Effect picture:

HTML&&CSS:

<!DOCTYPE html>
<html lang="en">

<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <script src="../jquery-3.4.1.min.js"></script>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  
  .tab {
   width: 500px;
   border-collapse: collapse;
   margin: 0 auto;
  }
  
  .tab td,
  th {
   border: 1px solid #000;
  }
  
  .tab .num {
   width: 20px;
  }
  
  .tab .add,
  .sub {
   width: 20px;
  }
  
  .current {
   background-color: pink;
  }
 </style>
</head>

<body>
 <table class="tab">
  <thead>
   <th>Select All<input type="checkbox" name="" value="" class="checkAll">
    <input type="checkbox" name="" value="" class="checkAll">
   </th>
   <th>Product Name</th>
   <th>Unit Price</th>
   <th>Quantity</th>
   <th>Subtotal</th>
   <th>Operation</th>
  </thead>
  <tbody>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>Computer</td>
    <td class="price">￥200.20</td>
    <td>
     <button type="button" class="sub">-</button>
     <input type="text" name="" value="1" class="num">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">￥200.20</td>
    <td class="delete">Delete</td>
   </tr>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>Mobile phone</td>
    <td class="price">￥100.30</td>
    <td>
     <button type="button" class="sub">-</button>
     <input type="text" name="" value="1" class="num">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">￥100.30</td>
    <td class="delete">Delete</td>
   </tr>
   <tr>
    <td><input type="checkbox" class="ed" /></td>
    <td>Air conditioning</td>
    <td class="price">￥1000.99</td>
    <td>
     <button type="button" class="sub">-</button>
     <input type="text" name="" value="1" class="num">
     <button type="button" class="add">+</button>
    </td>
    <td class="small_total">￥1000.99</td>
    <td class="delete">Delete</td>
   </tr>
  </tbody>
 </table>
 <div>
  <span><span style="color: red;" class="num_sum">1</span> item selected</span>
  <span>Total:</span>
  <span class="sum" style="color: red;">0</span>
  <div><span style="color: red;" class="delSome">Delete the selected product</span>
   <span style="color: red;" class="delAll">Empty shopping cart</span>
  </div>
 </div>
 </body>

</html>

JS:

//The selected state of the three small check buttons inside follows the Select All button //Because checked is an inherent property of the checkbox, use prop() to get and set this property $(function() {
   getSum();
   $(".checkAll").change(function() {
     // console.log($(this).prop("checked"));//The status of the select all button$(".ed,.checkAll").prop("checked", $(this).prop("checked"));
     getSum();
     if ($(".ed,.checkAll").prop("checked")) {
      //If all are selected, add the class name (background color) to all products
      $(".tab tbody").children().addClass("current");
     } else {
      $(".tab tbody").children().removeClass("current");
     }
    })
    //If all the small buttons are selected, the Select All button is selected. If the small buttons are not selected, the Select All button is not selected. //: checked selector, find the selected form element $(".ed").change(function() {
    // console.log($(".ed:checked").length);//Number of small checkboxes checked// console.log($(".ed").length);
    //console.log($(this).prop("checked"));
    if ($(".ed:checked").length === $(".ed").length) {
     $(".checkAll").prop("checked", true);
    } else {
     $(".checkAll").prop("checked", false);
    }
    getSum();
    if ($(this).prop("checked")) {
     $(this).parents("tr").addClass("current");
    } else {
     $(this).parents("tr").removeClass("current");
    }
   })

   $(".add").click(function() {
    let n = parseInt($(this).siblings(".num").val());
    //console.log(n);
    n++;
    $(this).siblings(".num").val(n);
    let price = $(this).parent().siblings(".price").html();
    price = price.substr(1);
    //console.log(price);
    $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
    getSum();
   })
   $(".sub").click(function() {
     let n = parseInt($(this).siblings(".num").val());
     //console.log(n);
     if (n === 1) {
      return false;
     }
     n--;
     $(this).siblings(".num").val(n);
     let price = $(this).parent().siblings(".price").html();
     price = price.substr(1);
     //console.log(price);
     $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
     getSum();
    })
    //Users can also directly modify the value in the form num (small bug), and calculate the subtotal in the same way$(".num").change(function() {
    let n = $(this).val();
    let price = $(this).parent().siblings(".price").html();
    price = price.substr(1);
    $(this).parent().siblings(".small_total").text("￥" + (n * price).toFixed(2));
    getSum();
   })

   function getSum() {
    let count = 0; //Calculate the total number of items let money = 0; //Calculate the total price $(".num").each(function(index) {
     if ($(".ed").eq(index).prop("checked") == true) {
      count += parseInt($(".num").eq(index).val());
      money += parseFloat($(".small_total").eq(index).text().substr(1));
     }
    })
    $(".num_sum").html(count);
    $(".sum").html(money.toFixed(2));
   }

   //Delete product module //Click delete to delete the current product, so start from $(this) $(".delete").click(function() {
     //Delete the current item$(this).parent().remove();
     $(".ed").change();
     getSum();
     clearCheckAll();
    })
    //Delete the selected product: If the small checkbox is selected, delete the corresponding product $(".delSome").click(function() {
     //Delete the selected item$(".ed:checked").parent().parent().remove();
     getSum();
     clearCheckAll();
    })
    // Clear the shopping cart $(".delAll").click(function() {
    $(".tab tbody").empty();
    getSum();
    clearCheckAll();
   })

   function clearCheckAll() {
    if ($(".tab tbody")[0].innerText == '') {
     $(".checkAll").prop("checked", false);
    }
   }
})

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Implementing a shopping cart using jQuery
jQuery implements the basic functions of the shopping cart
jQuery implements the total price calculation and total price transfer function of the shopping cart
jQuery implements all shopping cart functions

<<: jQuery implements accordion effects

>>: js method to delete a field in an object