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:
|
<<: jQuery implements accordion effects
>>: js method to delete a field in an object
Recommend
When adding a Windows 2008 server subdomain to a parent domain, an error message appears: the domain already exists
When joining a Windows 2008 server subdomain to a...
Detailed tutorial on building a private Git server on Linux
1. Server setup The remote repository is actually...
CentOS 8 system FTP server installation and passive mode configuration detailed tutorial
Table of contents 1. Understand the basics 2. Con...
Several CSS3 tag shorthands (recommended)
border-radius: CSS3 rounded corners Syntax: borde...
Detailed explanation of Docker fast build and Alibaba Cloud container acceleration configuration under Windows 7 environment
The previous article on Docker mentioned the cons...
JavaScript BOM location object + navigator object + history object
Table of contents 1. Location Object 1. URL 2. Pr...
Detailed tutorial on installation and configuration of compressed version of MySQL database
Table of contents 1. Download MySQL 2. Unzip the ...
How to wrap HTML title attribute
When I was writing a program a few days ago, I wan...
Ubuntu terminal multi-window split screen Terminator
1. Installation The biggest feature of Terminator...
Solution to nginx not jumping to the upstream address
Preface Today I encountered a very strange proble...
Troubleshooting process for Docker container suddenly failing to connect after port mapping
1. Background Generally, for Docker containers th...
The corresponding attributes and usage of XHTML tags in CSS
When I first started designing web pages using XH...
JS ES new features: Introduction to extension operators
1. Spread Operator The spread operator is three d...
innodb_flush_method value method (example explanation)
Several typical values of innodb_flush_method f...
JS implementation of carousel carousel case
This article example shares the specific code of ...