From b7445302ae4b1374c199435d163bf72bf3dbb009 Mon Sep 17 00:00:00 2001
From: YDD <3223657165@qq.com>
Date: Wed, 8 Sep 2021 18:04:04 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=88=A0=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/logshoppingcar/shopcar.css         |  12 +-
 css/logshoppingcar/shopcar2.css        | 111 +++++++++++
 css/logshoppingcar/shopcar2.min.css    |   1 +
 css/logshoppingcar/shopcar2.scss       | 115 ++++++++++++
 htmls/logshoppingcar/shopcar copy.html | 174 +++++++++++++++++
 htmls/logshoppingcar/shopcar.html      | 247 +++++++++++++------------
 6 files changed, 539 insertions(+), 121 deletions(-)
 create mode 100644 css/logshoppingcar/shopcar2.css
 create mode 100644 css/logshoppingcar/shopcar2.min.css
 create mode 100644 css/logshoppingcar/shopcar2.scss
 create mode 100644 htmls/logshoppingcar/shopcar copy.html

diff --git a/css/logshoppingcar/shopcar.css b/css/logshoppingcar/shopcar.css
index 77b28a3..55a1b55 100644
--- a/css/logshoppingcar/shopcar.css
+++ b/css/logshoppingcar/shopcar.css
@@ -2,17 +2,12 @@
   margin: 0;
   padding: 0;
 }
-
 li {
   list-style: none;
 }
-
 a {
   text-decoration: none;
 }
-
-
-
 section {
   height: 1200px;
   background-color: #f5f5f5;
@@ -98,9 +93,16 @@ section .whole .whole-1 .opt #checklist .among th:nth-child(3), section .whole .
   width: 120px;
 }
 
+section .whole .whole-1 .opt #checklist .among th:nth-child(4) input {
+  width: 90px;
+}
 section .whole .whole-1 .opt #checklist .among th:nth-child(5) {
   width: 120px;
 }
+section .whole .whole-1 .opt #checklist .among th:nth-child(5) input{
+  text-align: center;
+}
+
 
 section .whole .whole-1 .opt #checklist .among th:nth-child(5) input:nth-child(1), section .whole .whole-1 .opt #checklist .among th:nth-child(5) input:nth-child(3) {
   width: 15px;
diff --git a/css/logshoppingcar/shopcar2.css b/css/logshoppingcar/shopcar2.css
new file mode 100644
index 0000000..457714a
--- /dev/null
+++ b/css/logshoppingcar/shopcar2.css
@@ -0,0 +1,111 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+
+li {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+}
+
+section {
+  background-color: #f5f5f5;
+}
+
+section .content {
+  padding: 15px 50px;
+  margin: auto;
+}
+
+section .content .all {
+  display: inline-block;
+}
+
+section .content .all h2 {
+  font-weight: 600;
+  color: #cb1919;
+  float: left;
+  padding-bottom: 10px;
+}
+
+section .content .cartList {
+  border-top: 2px solid #cb1919;
+}
+
+section .content .cartList .whoil {
+  width: 100%;
+  background-color: #f3f3f3;
+  border: 1px solid #e0e0e0;
+  margin-bottom: 20px;
+  display: inline-flex;
+}
+
+section .content .cartList .whoil li {
+  padding: 20px 46px;
+}
+
+section .content .cartList .whoil li:nth-child(1) {
+  padding: 20px 10px;
+}
+
+section .content .cartList .whoil li:nth-child(1) img {
+  margin-left: 10px;
+}
+
+section .content .cartList .whoil li:nth-child(3) {
+  width: 800px;
+}
+
+section .content .cartList .whoil li:nth-child(4), section .content .cartList .whoil li:nth-child(5), section .content .cartList .whoil li:nth-child(6), section .content .cartList .whoil li:nth-child(7) {
+  float: right;
+}
+
+section .content .cartList ul {
+  width: 100%;
+  background-color: #f3f3f3;
+  border: 1px solid #e0e0e0;
+  display: inline-flex;
+}
+
+section .content .cartList ul li:nth-child(1) {
+  padding: 20px 5px;
+}
+
+section .content .cartList ul li:nth-child(1) img {
+  margin-left: 20px;
+  margin-top: -10px;
+}
+
+section .content .cartList ul li:nth-child(2) {
+  padding: 25px 15px;
+  width: 400px;
+}
+
+section .content .cartList ul li:nth-child(3) {
+  width: 300px;
+}
+
+section .content .cartList ul li:nth-child(5) {
+  padding: 20px 5px;
+}
+
+section .content .cartList ul li:nth-child(5) input {
+  border: 0;
+  outline: none;
+  background-color: transparent;
+}
+
+section .content .cartList ul li:nth-child(4), section .content .cartList ul li:nth-child(5), section .content .cartList ul li:nth-child(6), section .content .cartList ul li:nth-child(7) {
+  margin: auto;
+  float: right;
+}
+
+section .content .cartList ol {
+  display: inline-flex;
+  width: 100%;
+  background-color: #f3f3f3;
+  border: 1px solid #e0e0e0;
+}
diff --git a/css/logshoppingcar/shopcar2.min.css b/css/logshoppingcar/shopcar2.min.css
new file mode 100644
index 0000000..f9e6e21
--- /dev/null
+++ b/css/logshoppingcar/shopcar2.min.css
@@ -0,0 +1 @@
+*{margin:0;padding:0}li{list-style:none}a{text-decoration:none}section{background-color:#f5f5f5}section .content{padding:15px 50px;margin:auto}section .content .all{display:inline-block}section .content .all h2{font-weight:600;color:#cb1919;float:left;padding-bottom:10px}section .content .cartList{border-top:2px solid #cb1919}section .content .cartList .whoil{width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0;margin-bottom:20px;display:inline-flex}section .content .cartList .whoil li{padding:20px 46px}section .content .cartList .whoil li:nth-child(1){padding:20px 10px}section .content .cartList .whoil li:nth-child(1) img{margin-left:10px}section .content .cartList .whoil li:nth-child(3){width:800px}section .content .cartList .whoil li:nth-child(4),section .content .cartList .whoil li:nth-child(5),section .content .cartList .whoil li:nth-child(6),section .content .cartList .whoil li:nth-child(7){float:right}section .content .cartList ul{width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0;display:inline-flex}section .content .cartList ul li:nth-child(1){padding:20px 5px}section .content .cartList ul li:nth-child(1) img{margin-left:20px;margin-top:-10px}section .content .cartList ul li:nth-child(2){padding:25px 15px;width:400px}section .content .cartList ul li:nth-child(3){width:300px}section .content .cartList ul li:nth-child(5){padding:20px 5px}section .content .cartList ul li:nth-child(5) input{border:0;outline:none;background-color:transparent}section .content .cartList ul li:nth-child(4),section .content .cartList ul li:nth-child(5),section .content .cartList ul li:nth-child(6),section .content .cartList ul li:nth-child(7){margin:auto;float:right}section .content .cartList ol{display:inline-flex;width:100%;background-color:#f3f3f3;border:1px solid #e0e0e0}
diff --git a/css/logshoppingcar/shopcar2.scss b/css/logshoppingcar/shopcar2.scss
new file mode 100644
index 0000000..1ee1691
--- /dev/null
+++ b/css/logshoppingcar/shopcar2.scss
@@ -0,0 +1,115 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+li {
+    list-style: none;
+}
+a {
+    text-decoration: none;
+}
+
+section {
+    background-color: #f5f5f5;
+    .content {
+        padding: 15px 50px;
+        margin: auto;
+        .all {
+            display: inline-block;
+            h2 {
+                font-weight: 600;
+                color: #cb1919;
+                float: left;
+                padding-bottom: 10px;
+            }
+        }
+        .cartList {
+            border-top: 2px solid #cb1919;
+            .whoil {
+                width: 100%;
+                background-color: #f3f3f3;
+                border: 1px solid #e0e0e0;
+                margin-bottom: 20px;
+                display: inline-flex;
+                li {
+                    padding: 20px 46px;
+                    &:nth-child(1) {
+                        padding: 20px 10px;
+                        img {
+                            margin-left: 10px;
+                        }
+                    }
+                    &:nth-child(3) {
+                        width: 800px;
+                    }
+                    &:nth-child(4),
+                    &:nth-child(5),
+                    &:nth-child(6),
+                    &:nth-child(7) {
+                        float: right;
+                    }
+                }
+            }
+            // .checklist {
+            //     // padding: 20px 5px;
+            //     &:nth-child(1) {
+            //         padding: 20px 5px;
+            //     }
+            //     // &:nth-child(3) {
+            //     //     width: 800px;
+            //     // }
+            //     // &:nth-child(4),
+            //     // &:nth-child(5),
+            //     // &:nth-child(6),
+            //     // &:nth-child(7) {
+            //     //     width: 120px;
+            //     //     padding: 20px 46px;
+            //     // }
+            // }
+            ul {
+                width: 100%;
+                background-color: #f3f3f3;
+                border: 1px solid #e0e0e0;
+                display: inline-flex;
+                li {
+                    &:nth-child(1) {
+                        padding: 20px 5px;
+                        img {
+                            margin-left: 20px;
+                            margin-top: -10px;
+                        }
+                    }
+                    &:nth-child(2) {
+                        padding: 25px 15px;
+                        width: 400px;
+                    }
+                    &:nth-child(3) {
+                        width: 300px;
+                    }
+                    &:nth-child(5) {
+                        padding: 20px 5px;
+                        input {
+                            border: 0; // 去除未选中状态边框
+                            outline: none; // 去除选中状态边框
+                            background-color: rgba(0, 0, 0, 0); // 透明背景
+                        }
+                    }
+                    &:nth-child(4),
+                    &:nth-child(5),
+                    &:nth-child(6),
+                    &:nth-child(7) {
+                        margin: auto;
+                        float: right;
+                    }
+                }
+            }
+            ol {
+                display: inline-flex;
+                width: 100%;
+                background-color: #f3f3f3;
+                border: 1px solid #e0e0e0;
+                
+            }
+        }
+    }
+}
diff --git a/htmls/logshoppingcar/shopcar copy.html b/htmls/logshoppingcar/shopcar copy.html
new file mode 100644
index 0000000..c3abf80
--- /dev/null
+++ b/htmls/logshoppingcar/shopcar copy.html	
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html>
+
+<head lang="en">
+    <meta charset="UTF-8">
+    <title>购物车</title>
+    <link rel="stylesheet" href="../../css/layui.css">
+    <link rel="stylesheet" href="../../css/logshoppingcar/shopcar2.css">
+</head>
+
+<body>
+    <section>
+        <div class="content">
+            <!-- <div class="logo">
+            <img src=""><span onclick="close_plan();">关闭</span>
+        </div> -->
+            <div class="whole">
+
+                <div class="all">
+                    <h2>全部商品(20)</h2>
+                </div>
+            </div>
+            <div class="cartList" id="cartList">
+                <ul class="whoil">
+                    <li> <input type="checkbox" id="checkall">
+                        <label for="value1">全选</label>
+                    </li>
+                    <li>商品</li>
+                    <li></li>
+                    <li>单价</li>
+                    <li>数量</li>
+                    <li>小计</li>
+                    <li>操作</li>
+                </ul>
+                <ul>
+                    <li><input type="checkbox" name="arr[]" value="1">
+                        <label for="value1"></label>
+                        <img src="../../img/images/1-1.png"></li>
+                    <li>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</li>
+                    <li></li>
+                    <li>x3</li>
+                    <li>¥<input type="text" name="price" value="1688.00" disabled="true"></li>
+                    <li>
+                        <input type="button" name="minus" value="-" onclick="minus(0);" style="width: 15px;">
+                        <input type="text" name="amount" value="1" style="text-align: center;width: 40px;">
+                        <input type="button" name="plus" value="+" onclick="plus(0);" style="width: 15px;">
+                    </li>
+                    <li id="price0">¥1688.00</li>
+                    <li>
+                       
+                        <p onclick="del(0);">删除</p>
+                    </li>
+                </ul>
+                <ul>
+                    <li><input type="checkbox" name="arr[]" value="1">
+                        <label for="value1"></label>
+                        <img src="../../img/images/1-1.png"></li>
+                    <li>竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190</li>
+                    <li></li>
+                    <li>x3</li>
+                    <li>¥<input type="text" name="price" value="18.00" disabled="true"></li>
+                    <li>
+                        <input type="button" name="minus" value="-" onclick="minus(0);" style="width: 15px;">
+                        <input type="text" name="amount" value="1" style="text-align: center;width: 40px;">
+                        <input type="button" name="plus" value="+" onclick="plus(0);" style="width: 15px;">
+                    </li>
+                    <li id="price0">¥18.00</li>
+                    <li>
+                       
+                        <p onclick="del(0);">删除</p>
+                    </li>
+                </ul>
+
+                <ol>
+                    <!-- <li>
+                        <input type="checkbox" id="checkall">
+                        <label for="value1">全选/取消</label>
+                    </li> -->
+                    <li id="totalPrice">商品总计：<span></span></li>
+                    <li><span onclick="accounts();">结 算</span></li>
+                </ol>
+
+            </div>
+            <div style="display:none;"></div>
+        </div>
+    </section>
+    <script>
+        $(function () {
+            /*全选按钮状态显示判断*/
+            $("#checklist").find("input[type='checkbox']").click(function () {
+                /*初始化选择为TURE*/
+                $("#checkall")[0].checked = true;
+                /*获取未选中的*/
+                var nocheckedList = new Array();
+                $("#checklist").find('input:not(:checked)').each(function () {
+                    nocheckedList.push($(this).val());
+                });
+                /*状态显示*/
+                if (nocheckedList.length == $("#checklist").find('input').length) {
+                    $("#checkall")[0].checked = false;
+                    $("#checkall")[0].indeterminate = false;
+                } else if (nocheckedList.length) {
+                    $("#checkall")[0].indeterminate = true;
+                } else {
+                    $("#checkall")[0].indeterminate = false;
+                }
+            });
+            // 全选/取消
+            $("#checkall").click(function () {
+                // alert(this.checked);
+                if ($(this).is(':checked')) {
+                    $("#checklist").find('input').each(function () {
+                        $(this).prop("checked", true);
+                    });
+                } else {
+                    $("#checklist").find('input').each(function () {
+                        $(this).removeAttr("checked", false);
+                        $(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
+                    });
+                }
+            });
+        });
+        //减
+        function minus(num) {
+            var prices = document.getElementsByName("price")[num].value;
+            var count = parseInt(document.getElementsByName("amount")[num].value) - 1;
+            if (count < 1) {
+                alert("不能再减了，再减就没有啦！");
+            }
+            else {
+                document.getElementsByName("amount")[num].value = count;
+                var totals = parseFloat(prices * count);
+                document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);//.toFixed(2)表示四舍五入，取2位小数点
+                total();
+            }
+        }
+        //增
+        function plus(num) {
+            var prices = document.getElementsByName("price")[num].value;
+            var count = parseInt(document.getElementsByName("amount")[num].value) + 1;
+            document.getElementsByName("amount")[num].value = count;
+            var totals = parseFloat(prices * count);
+            document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);
+            total();
+        }
+        //计算总额
+        function total() {
+            var prices = document.getElementsByName("price");
+            var count = document.getElementsByName("amount");
+            var sum = 0;
+            for (var i = 0; i < prices.length; i++) {
+                sum += prices[i].value * count[i].value;
+            }
+            document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2);
+        }
+        //结算
+        function accounts() {
+            var obj = document.getElementById("cartList").nextElementSibling;//.nextElementSibling表示下一个同辈元素
+            obj.style.display = "block";
+            var str = "您本次购买的商品信息好下：";
+            str += "<br/>白岩松：白说：" + document.getElementById("price0").innerHTML;
+            str += "<br/>岛上书店：" + document.getElementById("price1").innerHTML;
+            str += "<br/>商品总计：" + document.getElementById("totalPrice").innerHTML;
+            obj.innerHTML = str;
+        }
+        //删除
+        function del(num) {
+            var ocartList = document.getElementById("cartList");
+            var delObj = document.getElementsByName("price")[num].parentNode.parentNode;
+            ocartList.removeChild(delObj);
+            total();
+        } 
+    </script>
+</body>
\ No newline at end of file
diff --git a/htmls/logshoppingcar/shopcar.html b/htmls/logshoppingcar/shopcar.html
index 639bacf..b143669 100644
--- a/htmls/logshoppingcar/shopcar.html
+++ b/htmls/logshoppingcar/shopcar.html
@@ -18,11 +18,12 @@
                     <h2>全部商品(20)</h2>
                 </div>
                 <!-- 选择 -->
-                <div class="opt">
+                <div class="opt cartList" id="cartList">
                     <ul>
                         <li class="optall">
                             <table>
-                                <th> <input type="checkbox" id="checkall">
+                                <th>
+                                    <input type="checkbox" id="checkall">
                                     <label for="value1">全选</label>
                                     <span>商品</span>
                                 </th>
@@ -32,87 +33,46 @@
                                 <th>操作</th>
                             </table>
                         </li>
+                        <li></li>
+                        <ul id="checklist">
+                            <li class="among">
+                                <table>
+                                    <th> <li><input type="checkbox" name="arr[]" value="1" class="box1">
+                                        <label for="value1"><img src="../../img/images/1-1.png" alt=""></label></li>
+                                    </th>
+                                    <th><li>
+                                            竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
+                                        </li></th>
+                                    <th>
+                            <li>x3</li>
+                            </th>
+                            <th>
+                                <li>￥<input type="text" name="price" value="1688.00" disabled="true"></li>
+                            </th>
+                            <th>
+                                <li>
+                                    <input type="button" name="minus" value="-" onclick="minus(0);">
+                                    <input type="text" name="amount" value="1">
+                                    <input type="button" name="add" value="+" onclick="add(0);">
+                                </li>
+                            </th>
+                            <th>
+                                <li id="price0">￥564.6</li>
+                            </th>
+                            <th>
+                                <li>
+                                    <p onclick="del(0);">删除</p>
+                                </li>
+                            </th>
+                            </table>
+                            </li>
+
+
+                        </ul>
+                        </li>
                     </ul>
-                    <ul id="checklist">
-                        <li class="among">
-                            <table>
-                                <th> <input type="checkbox" name="arr[]" value="1" class="box1">
-                                    <label for="value1"><img src="../../img/images/1-1.png" alt=""></label>
-                                </th>
-                                <th><span>
-                                        竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
-                                    </span></th>
-                                <th>x3</th>
-                                <th>￥1888.00</th>
-                                <th>
-                                    <input type="button" name="minus" value="-" onclick="minus(0);">
-                                    <input type="text" name="amount" value="1">
-                                    <input type="button" name="plus" value="+" onclick="plus(0);">
-                                </th>
-                                <th id="price0">￥564.6</th>
-                                <th onclick="del(1)">删除</th>
-                            </table>
-                        </li>
-                        <li class="among">
-                            <table>
-                                <th> <input type="checkbox" name="arr[]" value="2" class="box1">
-                                    <label for="value1"><img src="../../img/images/1-2.png" alt=""></label>
-                                </th>
-                                <th><span>
-                                        竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
-                                    </span></th>
-                                <th>x3</th>
-                                <th>￥1888.00</th>
-                                <th>
-                                    <input type="button" name="minus" value="-" onclick="minus(0);">
-                                    <input type="text" name="amount" value="1">
-                                    <input type="button" name="plus" value="+" onclick="plus(0);">
-                                </th>
-                                <th id="price0">￥564.6</th>
-                                <th onclick="del(1)">删除</th>
-                            </table>
-                        </li>
-
-                        <li class="among">
-                            <table>
-                                <th> <input type="checkbox" name="arr[]" value="3" class="box1">
-                                    <label for="value1"><img src="../../img/images/1-3.png" alt=""></label>
-                                </th>
-                                <th><span>
-                                        竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190
-                                    </span></th>
-                                <th>x3</th>
-                                <th>￥1888.00</th>
-                                <th>
-                                    <input type="button" name="minus" value="-" onclick="minus(0);">
-                                    <input type="text" name="amount" value="1">
-                                    <input type="button" name="plus" value="+" onclick="plus(0);">
-                                </th>
-                                <th id="price0">￥564.6</th>
-                                <th onclick="del(1)">删除</th>
-                            </table>
-                        </li>
-
-                        <li class="among">
-                            <table>
-                                <th> <input type="checkbox" name="arr[]" value="4" class="box1">
-                                    <label for="value1"><img src="../../img/images/1-4.png" alt=""></label></th>
-                                <th><span>竹迪&nbsp;&nbsp;客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画<br />靠山书房壁画抽象艺术画 11时来运转8190/span></th>
-                                <th>x3</th>
-                                <th>￥1888.00</th>
-                                <th>
-                                    <input type="button" name="minus" value="-" onclick="minus(0);">
-                                    <input type="text" name="amount" value="1">
-                                    <input type="button" name="plus" value="+" onclick="plus(0);">
-                                </th>
-                                <th id="price0">￥564.6</th>
-                                <th onclick="del(1)">删除</th>
-                            </table>
-                        </li>
-                   
-                    </li>
-                </ul>
                 </div>
+                <div style="display:none;"></div>
             </div>
         </div>
 
@@ -121,41 +81,96 @@
 </body>
 <script type="text/javascript" src="../../js/jquery-1.9.1.js"></script>
 <script type="text/javascript">
-    $(function () {
-        /*全选按钮状态显示判断*/
-        $(".checklist").find("input[type='checkbox']").click(function () {
-            /*初始化选择为TURE*/
-            $(".checkall")[0].checked = true;
-            /*获取未选中的*/
-            var nocheckedList = new Array();
-            $(".checklist").find('input:not(:checked)').each(function () {
-                nocheckedList.push($(this).val());
-            });
-            /*状态显示*/
-            if (nocheckedList.length == $(".checklist").find('input').length) {
-                $(".checkall")[0].checked = false;
-                $(".checkall")[0].indeterminate = false;
-            } else if (nocheckedList.length) {
-                $(".checkall")[0].indeterminate = true;
-            } else {
-                $(".checkall")[0].indeterminate = false;
-            }
-        });
-        // 全选/取消
-        $(".checkall").click(function () {
-            // alert(this.checked);
-            if ($(this).is(':checked')) {
-                $(".checklist").find('input').each(function () {
-                    $(this).prop("checked", true);
-                });
-            } else {
-                $(".checklist").find('input').each(function () {
-                    $(this).removeAttr("checked", false);
-                    $(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
-                });
-            }
-        });
-    });
+
+//计算总额
+function total() {
+        var prices = document.getElementsByName("price");
+        var count = document.getElementsByName("amount");
+        var sum = 0;
+        for (var i = 0; i < prices.length; i++) {
+            sum += prices[i].value * count[i].value;
+        }
+        document.getElementById("totalPrice").getElementsByTagName("span")[0].innerHTML = "¥" + sum.toFixed(2);
+    }
+    //结算
+    function accounts() {
+        var obj = document.getElementById("cartList").nextElementSibling;//.nextElementSibling表示下一个同辈元素
+        obj.style.display = "block";
+        // var str = "您本次购买的商品信息好下：";
+        // str += "<br/>白岩松：白说：" + document.getElementById("price0").innerHTML;
+        // str += "<br/>岛上书店：" + document.getElementById("price1").innerHTML;
+        // str += "<br/>商品总计：" + document.getElementById("totalPrice").innerHTML;
+        // obj.innerHTML = str;
+    }
+    //删除
+    function del(num) {
+        var ocartList = document.getElementById("cartList");
+        var delObj = document.getElementsByName("price")[num].parentNode.parentNode;
+        ocartList.removeChild(delObj);
+        total();
+    } 
+    //增
+    function add(num) {
+        var prices = document.getElementsByName("price")[num].value;
+        var count = parseInt(document.getElementsByName("amount")[num].value) + 1;
+        document.getElementsByName("amount")[num].value = count;
+        var totals = parseFloat(prices * count);
+        document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);
+        total();
+    }
+    //减
+    function minus(num) {
+        var prices = document.getElementsByName("price")[num].value;
+        var count = parseInt(document.getElementsByName("amount")[num].value) - 1;
+        if (count < 1) {
+            alert("不能再减了，再减就没有啦！");
+        }
+        else {
+            document.getElementsByName("amount")[num].value = count;
+            var totals = parseFloat(prices * count);
+            document.getElementById("price" + num).innerHTML = "¥" + totals.toFixed(2);//.toFixed(2)表示四舍五入，取2位小数点
+            total();
+        }
+    }
+    // $(function () {
+    //     /*全选按钮状态显示判断*/
+    //     $("#checklist").find("input[type='checkbox']").click(function () {
+    //         /*初始化选择为TURE*/
+    //         $(".checkall")[0].checked = true;
+    //         /*获取未选中的*/
+    //         var nocheckedList = new Array();
+    //         $("#checklist").find('input:not(:checked)').each(function () {
+    //             nocheckedList.push($(this).val());
+    //         });
+    //         /*状态显示*/
+    //         if (nocheckedList.length == $("#checklist").find('input').length) {
+    //             $(".checkall")[0].checked = false;
+    //             $(".checkall")[0].indeterminate = false;
+    //         } else if (nocheckedList.length) {
+    //             $(".checkall")[0].indeterminate = true;
+    //         } else {
+    //             $(".checkall")[0].indeterminate = false;
+    //         }
+    //     });
+    //     // 全选/取消
+    //     $(".checkall").click(function () {
+    //         // alert(this.checked);
+    //         if ($(this).is(':checked')) {
+    //             $("#checklist").find('input').each(function () {
+    //                 $(this).prop("checked", true);
+    //             });
+    //         } else {
+    //             $("#checklist").find('input').each(function () {
+    //                 $(this).removeAttr("checked", false);
+    //                 $(this).prop("checked", false); // 根据官方的建议：具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()
+    //             });
+    //         }
+    //     });
+    // });
+
+
+
+  
 </script>
 
 </html>
\ No newline at end of file