购物车案例

一、结构

1. css

* {
  padding: 0;
  margin: 0;
}
td {
  width: 120px;
  text-align: center;
}
.operate {
  cursor: pointer;
}
.operate span {
  display: inline-block;
  width: 15px;
  height: 15px;
  line-height: 15px;
  border: 1px solid #ccc;
}
.operate input {
  width: 40px;
  text-align: center;
}
.red {
  color:red;
}
.addBackground {
  background-color: skyblue;
}

2. html

<table class="shopping" border="1">
  <thead>
    <tr>
      <td><input type="checkbox" class="allCheck">全选</td>
      <td>商品</td>
      <td>单价</td>
      <td>数量</td>
      <td>小计</td>
      <td>操作</td>
    </tr>
  </thead>
  <tbody>
    <tr class="addBackground">
      <td><input type="checkbox" class="singleCheck" checked></td>
      <td>玩具车</td>
      <td class="price">¥75.00</td>
      <td class="operate">
        <span class="add">+</span>
        <input class="input_price" type="text" value="1">
        <span class="sub">-</span>
      </td>
      <td class="altogether_price">¥75.00</td>
      <td><a href="javascript:;" class="delete">删除</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="singleCheck"></td>
      <td>小自行车</td>
      <td class="price">¥135.00</td>
      <td class="operate">
        <span class="add">+</span>
        <input class="input_price" type="text" value="1">
        <span class="sub">-</span>
      </td>
      <td class="altogether_price">¥135.00</td>
      <td><a href="javascript:;" class="delete">删除</a></td>
    </tr>
    <tr>
      <td><input type="checkbox" class="singleCheck"></td>
      <td>滑板车</td>
      <td class="price">¥200.00</td>
      <td class="operate">
        <span class="add">+</span>
        <input class="input_price" type="text" value="1">
        <span class="sub">-</span>
      </td>
      <td class="altogether_price">¥200.00</td>
      <td><a href="javascript:;" class="delete">删除</a></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td><input type="checkbox" name="" class="allCheck">全选</td>
      <td><a href="javascript:;"   >删除选中的商品</a></td>
      <td><a href="javascript:;">清理购物车</a></td>
      <td>数量：<span class="all_number red"></span></td>
      <td colspan="2">结算：<span class="all_price red"></span></td>
    </tr>
  </tfoot>
</table>

二、功能 

1.  全选按钮

$(".allCheck").change(function() {
  $(".singleCheck,.allCheck").prop("checked",$(this).prop("checked"));
  if($(".allCheck").prop("checked")) {
    $("tbody tr").addClass("addBackground");
  }else {
    $("tbody tr").removeClass("addBackground");
  }
})
$(".singleCheck").change(function() {
  if($(".singleCheck:checked").length == $('.singleCheck').length) {
    $(".allCheck").prop("checked", true);
  }else {
    $(".allCheck").prop("checked", false);
  }
  if($(this).prop("checked")) {
    $(this).parents("tr").addClass("addBackground");
  }else {
    $(this).parents("tr").removeClass("addBackground");
  }
})

2. 商品小计

$('.add').click(function() {
  var num = $(this).siblings('input').val();
  var price = $(this).parent().siblings('.price').html().substr(1);
  num++;
  $(this).siblings('input').val(num);
  $(this).parent().siblings('.altogether_price').html('¥' + (price * num).toFixed(2));
  changeNumber();
})

$('.sub').click(function() {
  var num = $(this).siblings('input').val();
  var price = $(this).parent().siblings('.price').html().substr(1);
  if(num == 1) {
    return false;
  }else {
    num--;
  }
  $(this).siblings('input').val(num);
  $(this).parent().siblings('.altogether_price').html('¥' + (price * num).toFixed(2));
  changeNumber();
})

$(".singleCheck").change(function() {
  var price = $(this).parent().siblings('.price').html().substr(1);
  var number = $(this).parent().siblings(".operate").children(".input_price").val();
  $(this).parent().siblings('.altogether_price').html('¥' + (price * number).toFixed(2));
  changeNumber();
})

3. 总量与总价

changeNumber();
function changeNumber() {
  var number = 0;
  var price = 0;
  $('.input_price').each(function(i,ele) {
    var num = $(ele).val();
    price += parseFloat($(ele).parent().siblings('.altogether_price').html().substr(1)); 
    number += parseInt(num);
  })
  $('.all_number').text(number);
  $('.all_price').text('¥' + price.toFixed(2));
}

4. 删除商品列表

$('.delete').click(function() {
  $(this).parents('tr').remove();
  changeNumber();
})

5. 删除选中的商品以及清除购物车

$(".del_choosed").click(function() {
  $(".singleCheck:checked").parents('tr').remove(); //隐式迭代
  changeNumber();
})
$(".del_all").click(function() {
  $("tbody tr").remove();
  changeNumber();
})