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
Ubuntu 16.04 64-bit compatible with 32-bit programs in three steps
Step 1: Confirm the architecture of your system d...
Example code for implementing timeline and animation effects using JavaScript (front-end componentization)
Table of contents Code cleaning "Frames"...
Who is a User Experience Designer?
Scary, isn't it! Translation in the picture: ...
Analysis and solution of a MySQL slow log monitoring false alarm problem
Previously, for various reasons, some alarms were...
Teach you how to use AWS server resources for free
AWS - Amazon's cloud computing service platfo...
Vue Virtual DOM Quick Start
Table of contents Virtual DOM What is virtual dom...
What are HTML inline elements and block-level elements and their differences
I remember a question the interviewer asked durin...
MySQL time type selection
Table of contents DATETIME TIMESTAMP How to choos...
How to use fdisk to partition disk in Linux
Commonly used commands for Linux partitions: fdis...
Detailed explanation of MySQL sql_mode query and setting
1. Execute SQL to view select @@session.sql_mode;...
HTML page jump code
Save the following code as the default homepage fi...
CSS implements five common 2D transformations
2D transformations in CSS allow us to perform som...
Implementation of MySQL asc and desc data sorting
Data sorting asc, desc 1. Single field sorting or...
Nginx compiled nginx - add new module
1. View existing modules /usr/local/nginx/sbin/ng...
MySQL DML statement summary
DML operations refer to operations on table recor...