js 购物车结算页面demo（单选框）全选单选 价格计算

<div style="width: 100%;">
    <div style="width: 1200px;background: #fff;border-radius: 12px;margin: auto;margin-top: 20px;">
        <div style="display: flex;border-bottom: 1px solid #eee;line-height: 44px;">
          <div style="display: flex;justify-content: center;align-items: center;">
            <input  type="checkbox" name="全选" id="checkboxAll" onchange="getCheckAll(this)" value="true">
          </div>
          <div style="width: 80px;" class="goods">商品</div>
          <div style="flex: 1;" class="goods">标题</div>
          <div style="width: 150px;" class="goods">单价</div>
          <div style="width: 150px;" class="goods">数量</div>
          <div style="width: 150px;" class="goods">金额</div>
          <div style="width: 150px;" class="goods">编辑</div>
        </div>
        <div id="box"></div>
        <div id="picBox">
          <span>总价:</span>
          <span id="picplas"></span>
        </div>
      </div>
</div>

        #checkboxAll,#checkboxBo{
            margin: 0 10px;
        }
        .goods{
            text-align: center;font-size: 14px;color: #333;
        }
        #picplas{
            font-size: 20px;
            font-weight: 800;
            color: #f40;
            margin-left: 12px;
        }
        #picBox{
            display: flex;justify-content: flex-end;line-height: 60px;padding: 0 40px;
        }
        #picBox span:nth-child(1){
            font-size: 13px;color: #999;
        }
        #goodsBottom{
            display: flex;border-bottom:1px solid #eee;
        }
        #goodsBottom div:nth-child(1){
            display: flex;justify-content: center;align-items: center;
        }

window.addEventListener('beforeunload', function (event) {
      // 在这里执行你想要的操作，例如确认提示或者清理工作
      const message = '您确定要离开吗？';
      event.returnValue = message; // 标准浏览器需要此行来显示提示信息
      sessionStorage.setItem('shoppingCart',JSON.stringify(arr))
      return message; // 兼容某些旧版本浏览器
    });

    var str=''
    var arr = [
      {id:0,img:'./image/1.jpg',title:'永诺（YONGNUO） YN433直播相机可更换镜头M43直播相机 标配-无镜头',pic:'19.00',quantity:1,checkbox:true},
      {id:1,img:'./image/2.jpg',title:'永诺（YONGNUO） YN433直播相机可更换镜头M43直播相机 标配-无镜头',pic:'19.00',quantity:2,checkbox:true},
      {id:2,img:'./image/3.jpg',title:'永诺（YONGNUO） YN433直播相机可更换镜头M43直播相机 标配-无镜头',pic:'19.00',quantity:1,checkbox:true}
     
    ]
    var obj = JSON.parse(JSON.stringify(arr))
    var picplas = 0
    function DomRender(){
      arr.forEach((temp,i)=>{
        temp.checkbox ? picplas+=(Number(temp.pic)*temp.quantity) : ''
      
      str+=`
      <div id="goodsBottom">
        <div>
          <input type="checkbox" name="" id="checkboxBo" onchange="getCheck(this,${i})" checkbox="${temp.checkbox}">
        </div>
        <div style="width: 80px;"><img style="width: 100%;" src="${temp.img}" alt=""></div>

          <div style="margin: 20px;flex:1;font-size:13px;color:#666;">
            <span>${temp.title}</span>
          </div>
          
          <span style="width:150px;text-align: center;line-height:84px;color:#999;font-size:12px;">￥${temp.pic}</span>
          <div style="width:150px;display: flex;align-items: center;justify-content: center;">
            <button style="width: 26px;height: 20px;font-size:14px;" onclick="getReduce(${i})">-</button>
            <div style="overflow: hidden;width: 32px;height: 20px;font-size:14px;">
              <input style="width: 28px;height: 22px;margin:-2px;font-size:14px;text-align: center;background:#eee;" id="Quantity${i}" type="text" value="${temp.quantity}">
            </div>
            <button style="width: 26px;height: 20px;" onclick="getIncrease(${i})">+</button>
          </div>
          <span style="width:150px;text-align: center;line-height:84px;color:#f40;font-weight: 700;font-size:12px;">￥${(Number(temp.pic)*temp.quantity).toFixed(2)}</span>
          <div  style="width:150px;display: flex;align-items: center;justify-content: center;text-decoration: underline;color:#999;">
            <span style="font-size:12px;margin-right:10px;cursor: pointer;" onclick="update(${i})">删除</span>
            <span style="font-size:12px;cursor: pointer;">加入收藏夹</span>
          </div>
      </div>
      `
    })

    
    document.getElementById('picplas').innerHTML = `${picplas.toFixed(2)}`
    document.getElementById('box').innerHTML = str
    str=''
    
    var input = document.querySelectorAll('#checkboxBo')
    arr.forEach((temp,i)=>{
      input[i].checked = temp.checkbox
    })
    document.getElementById('checkboxAll').checked = Array.from(document.querySelectorAll('#checkboxBo')).every(element => element.checked === true);
    }
    DomRender()

    function getCheck(temp,i){
      if(!temp.checked){
        picplas = picplas-(Number(arr[i].pic)*arr[i].quantity)
        document.getElementById('picplas').innerHTML = picplas.toFixed(2)
        console.log(obj,temp.checked,picplas,Number(arr[i].pic)*arr[i].quantity)
        document.getElementById('checkboxAll').checked = false
      }else{
        picplas = picplas+(Number(arr[i].pic)*arr[i].quantity)
        document.getElementById('picplas').innerHTML = picplas.toFixed(2)
        
        const result = Array.from(document.querySelectorAll('#checkboxBo')).every(element => element.checked === true);
        document.getElementById('checkboxAll').checked = result
        console.log(result,'2424234')
      }
    }
    function update(e){
      picplas = 0
      arr.splice(e,1)
      console.log(arr)
      DomRender()
    }

    function getReduce(temp){
      if(arr[temp].quantity!=1){
        arr[temp].quantity--
        picplas = picplas- Number(arr[temp].pic)
        document.getElementById(`Quantity${temp}`).value = arr[temp].quantity
        document.getElementById('picplas').innerHTML = picplas.toFixed(2)
      }else{
        return console.log('----');
      }
    }

    function getIncrease(temp){
      console.log('++++');
      arr[temp].quantity++
      picplas = picplas + Number(arr[temp].pic)
      document.getElementById(`Quantity${temp}`).value = arr[temp].quantity
      document.getElementById('picplas').innerHTML = picplas.toFixed(2)
    }

    function getCheckAll(e){
      if(e.checked){
        picplas=0
        document.querySelectorAll('#checkboxBo').forEach((temp,i)=>{
          temp.checked = true
          picplas = picplas+(Number(arr[i].pic)*arr[i].quantity)
        })
        document.getElementById('picplas').innerHTML = picplas.toFixed(2)
      }else{
        document.querySelectorAll('#checkboxBo').forEach(temp=>{
          temp.checked = false
          picplas=0
          document.getElementById('picplas').innerHTML = picplas.toFixed(2)
        })
      }
    }