``` <style> table, th, td { border: 1px solid black; } table { border-collapse: collapse; margin-top: 30px; margin-bottom: 30px; width: 600px; text-align: center; } td,th{ width: 120px; } button { border: 0; } </style> <table> <tr> <th><button class="all">全選</button></th> <th>商品名稱</th> <th>單價</th> <th>數量</th> <th>小計</th> <th>操作</th> </tr> <tr> <td><input type="checkbox" name="" class="getGoods"> </td> <td>電腦</td> <td class="price">200</td> <td> <button class="jian">-</button> <span>1</span> <button class="add">+</button> </td> <td class="total">200</td> <td>刪除</td> </tr> <tr> <td><input type="checkbox" name="" class="getGoods"> </td> <td>手機</td> <td class="price">100</td> <td> <button class="jian">-</button> <span>1</span> <button class="add">+</button> </td> <td class="total">100</td> <td>刪除</td> </tr> </table> <div> <span>總計：</span> <span class="sum">0</span> </div> <script> // 邏輯： // 加載頁面時，調用getSum 總價 getSum(); // 1.加減（小計） // 加法 $(".add").click(function(){ // 1.1 算出數量變化 let num = parseInt($(this).prev().text()); num++; $(this).prev().text(num); // 1.2 算出 小計價格 let price = parseInt($(this).parent().prev().text()); $(this).parent().next().text(price*num); // 調用 總價 getSum(); }) // 減法 $(".jian").click(function(){ // 1.1 算出數量變化 let num = parseInt($(this).next().text()); num--; if(num<1) num=1; $(this).next().text(num); // 1.2 算出 小計價格 let price = parseInt($(this).parent().prev().text()); $(this).parent().next().text(price*num); // 調用 總價 getSum(); }) // 2. 總價 = 小計之和（選中條件下） function getSum(){ let sum = 0; for(let i=0;i<$('.total').length;i++){ // 添加 選中判斷的條件 if($('.total').eq(i).parent().find('input').prop('checked')){ sum += parseInt($('.total').eq(i).text()) } } $('.sum').text(sum); } // 3. 選中 // 選中：有三種表現形式 // 1> 用戶點擊 出現 √ // 2> 添加屬性 checked // 3> js操作 attr() / prop('checked',true) // 3.1 全選 $('.all').click(function(){ $('.getGoods').prop('checked',true); // 調用 總價 getSum(); }); // 3.2 用戶選中 $('.getGoods').click(function(){ // 其實已經選中了 // 調用 總價 getSum(); }); </script> ```