购物车

//CSS样式
body {
font-weight: 900;
font-size: 30px !important;
/border-width:3px !important; ;/
}

 <div class="top">
<ul>
    <li><input type="checkbox" name="" id="all" value="全选"/>全选</li>
    <li>商品信息</li>
    <li>商品参数</li>
    <li>单价</li>
    <li>数量</li>
    <li>金额</li>
    <li>操作</li>  </ul>
 </div>
 <div class="box">
 </div>
 <div  id="allP" style="position: fixed;width: 100px;height: 300px;background: pink;font-size: 40px;top:200px">
总价：0</div>

//  js


function $cl(cl) {
    return document.getElementsByClassName(cl); //根据classname获取节点
}
function $(id) {
    return document.getElementById(id)   ;//根据id获取节点
}
// 生成结构
json.forEach(function (item, index) {     
    var goods = '';
    item.goods.forEach(function (good, gindex) {
        goods += `    <div class="proprietary"><div class="shop">
        <ul>
            <li><input type="checkbox" class="product"/></li>
            <li><img src="${good.src}" alt="img"></li>
            <li>${good.goodName}</li>
            <li><p>规格：默认<br/>尺寸：16*16*3(cm)</p></li>
            <li>${good.price}</li>
            <li class="number">
                <buttton class="subtract">-&nbsp;</buttton>
                <input type="text" class="inp" value="${good.num}">
                <buttton class="plus">+</buttton>
            </li>
            <li class="price">￥${good.price * good.num}</li>
            <li>
                <button class="delete">移除商品</button>
            </li>
        </ul>
    </div> </div>`
    })
    
    $cl("box")[0].innerHTML += `
          <div class="head" >
           <input type="checkbox" name="" id="" class="store" />店铺:${item.shopname}
          </div>
          <div> ${goods}</div>          `
})


//  全选

$("all").onclick = function (e) {
    // onkeyup
    console.log($cl("store"))
    // $cl("store").checked=this.checked
    // $cl("product").checked=this.checked
    for (var i = 0; i < $cl("store").length; i++) {
        $cl("store")[i].checked = this.checked
    }
    for (var i = 0; i < $cl("product").length; i++) {
        $cl("product")[i].checked = this.checked
    }
    allPrice()
}

// 店铺的全选

 $cl("box")[0].onclick=function (e) {
 var oTarget=e.target;
 if(oTarget.className==="store"){
 var arrPro=oTarget.parentNode.nextElementSibling.getElementsByClassName("product")
     for (var i = 0; i < arrPro.length; i++) {
         arrPro[i].checked = oTarget.checked
     }
 // 判断是否都选中
    for(var i=0;i<$cl("store").length;i++){
        if(!$cl("store")[i].checked){
            $("all").checked=false
            break
        }
        $("all").checked=true
    }
     allPrice()
 }

// good 选中

 if(oTarget.className==="product"){
     var oPar=oTarget.parentNode.parentNode.parentNode.parentNode.parentNode
     var arrStore=oPar.previousElementSibling.firstElementChild
     var arrP= oPar.getElementsByClassName("product")

// 判断商品是否都选中

     for(var i=0;i<arrP.length;i++){
         if(!arrP[i].checked){
             arrStore.checked=false
             break
         }
         arrStore.checked=true
     }
     // 判断店铺是否都选中
     for(var i=0;i<$cl("store").length;i++){
         if(!$cl("store")[i].checked){
             $("all").checked=false
             break
         }
         $("all").checked=true
     }
     allPrice()
 }

// 点击加

 if(oTarget.className==="plus"){
     oTarget.previousElementSibling.value++;
     oTarget.parentNode.nextElementSibling.innerText= "￥"+(oTarget.previousElementSibling.value * oTarget.parentNode.previousElementSibling.innerText)
     allPrice()
 }

}
//总价

function  allPrice() {
    var price=0;
  for(var i=0;i< $cl("product").length;i++){
       if( $cl("product")[i].checked){
           price+= ($cl("product")[i].parentNode.parentNode.children[6].innerText.substring(1,)-0)
       }
  }
$("allP").innerHTML="总价:"+price;
}