购物车

<script>
/**
1、全选功能
  每一行都会别选中
  每行的小计价格会汇总加到一起放入总价
2、单选功能
  这一行会被选中或者取消选中
  将购物车内被选中的行的小计价格汇总加到一起放入总计
  判断是否是被全选了(全选按钮是否该被选中)
3、数量加减按钮(一)
  这一行被选中
  数量进行添加或者减少(最少为1)
  计算这一行的小计价格
  将购物车内被选中的行的小计价格汇总加到一起放入总计
4、手动修改数量
  这一行被选中
  计算这一行的小计价格
  将购物车内被选中的行的小计价格汇总加到一起放入总计
5、删除按钮
  这一行会被移掉
  将购物车内被选中的行的小计价格汇总加到一起放入总计
6、删除被选中的商品
  被选中的商品会被删除
  购物车内总计价格为0
*/
</script>

<script>
  // 找到 DOM 节点
  var add = document.querySelectorAll('.Increase')   // 所有的加按钮
  var reduce = document.querySelectorAll('.Reduce')  // 所有的减按钮
  var numIpt = document.querySelectorAll('.unm')   // 找到所有数量输入框
  var rows = document.querySelectorAll('.row')      // 找到所有的行
  var choose = document.querySelectorAll('.choose')  // 找到所有单选框
  var chooseAll = document.querySelectorAll('choose_all')  // 找到所有的全选按钮
  var btnDel = document.querySelectorAll('.btn-del')    // 找到所有的删除按钮
  var delCheck = document.querySelector('.del-check')   // 删除被选中
 
  // 数量添加事件 1
  for(var i = 0; i < add.length; i++) {
    add[i].onclick = function() {
      numChange(this, 'add')         // this指向当前被点击的节点
    }
  }

  // 数量减少事件 2
  for(var i = 0; i < reduce.length; i++) {
    reduce[i].onclick = function() {
      numChange(this, 'reduce')
    }
  }

  // 手动修改数量 3
  for(var i = 0; i < numIpt; i++) {
    // 输入完之后
    numIpt[i].onblur = function() {
      if(this.value < 1) {   // 数量不可以少于1
        this.value = 1
      }
      this.value = parseInt(this.value)   // 保证数量是整数
      numChange(this, 'cursor')
    }
  }

  // 单选框点击事件  5
  for(var i = 0; i < choose.length; i++) {
    choose[i].onclick = function() {
      getTotal()   // 计算总价
    }
  }

  // 全选 6
  for(var i = 0; i < chooseAll.length; i++) {
    chooseAll[i].onclick = function() {
      for(var i = 0; i < rows.length; i++) {
        var check = rows[i].querySelector('.choose')   // 找到每行的选中框
        check.checked = this.checked
      }
      chooseAll[0].checked = chooseAll[1].checked = this.checked
      getTotal()
    }
  }
  
  //  删除这一行  7 
  for(var i = 0; i < btnDel.length; i++) {
    btnDel[i].onclick = function(event) {
      event.preventDefault();
      var tr = this.parentNode.parentNode
      tr.parentNode.removeChild(tr)
      getTotal()
    }
  }

  // 删除被选中的商品
  delCheck.onclick = function() {
    rows = document.querySelectorAll('.row')
    for(var i = 0; i < rows.length; i++) {
      // 找到被选中的行
      var check = rows[i].querySelector('.choose')   // 找到每行的选中框
      if(check.checked) {
        rows[i].parentNode.removeChild(rows[i])
      }
    }
    getTotal()
  }

  // 总计功能 4
  function getTotal() {
    // 1、设置总价
    var total = 0

    // 遍历所有行
    rows = document.querySelectorAll('.row')
    for(var i = 0; i < rows.length; i++) {
      // 找到被选中的行
      var check = rows[i].querySelector('.choose')   // 找到每行的选中框
      if(check.checked) {
        var smTot = rows[i].querySelector('.u-price').innerHTML
        smTot = Number(smTot)
        total = total + smTot
      }
    }

    var tPrice = document.querySelector('.t-price')
    tPrice.innerHTML = total.toFixed(2)

    // 2. 判断是否全选
    var isAllCheck = true    // 
    for(var i = 0; i < rows.length; i++) {
      var check = rows[i].querySelector('.choose')   // 找到每行的选中框
      if(!check.checked) {    // 一旦有没有被选中的
        isAllCheck = false
        break                   // 
      }
      if(rows.length) {
        isAllCheck = false
      }
    }
    chooseAll[0].checked = isAllCheck
    chooseAll[1].checked = isAllCheck

    // 3. 计算总商品个数
    var allNum = 0
    for(var i = 0; i < rows.length; i++) {
      // 找到被选中的行
      var check = rows[i].querySelector('.choose')   // 找到每行的选中框
      if(check.checked) {
        var smTot = rows[i].querySelector('.unum').value
        smTot = Number(smTot)
        allNum = allNum + smTot
      }
    }
    document.querySelector('.t-number').innerHTML = allNum
  }
  getTotal()
  /**
    数量变化的函数
    {Object} dom 被点击的那个DOM节点
    {String} act 数量添加还是减少还是手动修改
  */
  function numChange(dom, act) {
     // 1. 数量变化
     var amount = dom.parentNode     // 父标签
      var ipt = amount.querySelector('.num')   // 找到数量框
      var num = ipt.value      // 数量

      //
      if(act == 'add') {   // 添加行为
        num++
        ipt.value = num
      } else if(act == 'reduce') {  // 减少行为
        if(num == 1) {
          num = 1      // 数量是一就不变化
        } else {
          num--          // 数量减一
        }
        ipt.value = num
      } else if (act == 'cursor'){
        console.log('手动修改数量')
      } else {   // 非法行为
        return
      }


      // 2. 计算这一行的小计
      var tr = amount.parentNode.parentNode         // 找到当前行
      var unit = tr.querySelector('.unit')      // 价格框

      var price = unit.innerHTML
      var smTotal = num * price             // 小计
      smTotal = smTotal.toFixed(2)       // 保留两位小数
      // 3. 将小计放入到对应的位置
      var smPrice = tr.querySelector('.u-price')     // 小计框
      smPrice.innerHTML = smTotal
      // 4. 这一行被选中
      var choose = tr.querySelector('.choose')
      choose.checked = true
      // 5. 计算总计价格
      getTotal()
  }

</script>