实现购物车结算功能：批量/全部删除，全选，单价/总价，数量增减，页面隐藏/显示

最新推荐文章于 2025-06-19 21:00:54 发布

原创

最新推荐文章于 2025-06-19 21:00:54 发布 · 4.9k 阅读

8 ·

CC 4.0 BY-SA版权

这是一个实现购物车功能的示例，包括全选商品、批量/单独删除、数量增加减少、单价/总价显示、输入框验证以及购物车页面的隐藏/显示控制。通过JavaScript和AngularJS实现，当购物车为空时会提示用户去逛商场。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .mouse_color{
            background-color: #cccccc;
        }
        .num{
            width: 50px;
        }
        a{
            text-decoration: none;
        }
        #btn1,#btn2{
            color:white;
            width: 100px;
            float: right;
            border: solid red;
            margin-right: 88px;
            background-color: #ff3b30;
        }
    </style>
    <script src="../jquery-1.11.1/jquery-2.1.0.js"></script>
    <script src="../angular-1.5.5/angular.js"></script>
    <script type="text/javascript">
        $(function () {
            // 鼠标移到行的颜色:光标在表格上移动，当前行变色；( mousemove或mouseover )
            $("#tab tr").mouseover(function () {
                $(this).addClass("mouse_color");
            });
            // 鼠标移出行的颜色:离开当前行，颜色恢复
            $("#tab tr").mouseout(function () {
                $(this).removeClass("mouse_color");
            });
        });
    </script>
    <script>
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function ($scope) {
            //1. 声明数据对象，初始化商品信息，数据自拟且不低于四条
            $scope.Products = [
                {
 
 name:"qq",price:12.90,number:1,totalPrice:12.90,state:false},
                {
 
 name:"wx",price:23.90,number:1,totalPrice:23.90,state:false},
                {
 
 name:"cn",price:99.90,number:1,totalPrice:99.90,state:false},
                {
 
 name:"us",price:2.90,number:1,totalPrice:2.90,state:false},
                {
 
 name:"jp",price:0.90,number:1,totalPrice:0.90,state:false}
            ];