json数据如下：

var json=[ // 两个店铺 { "shopname": "京东自营", "shopID": 101, // 商品 "goods": [ { "checked": false, "goodName": "三星 Galaxy A8s（SM-G8870） 黑瞳全视屏 6GB+128GB 外星银 全网通4G 双卡双待", "goodID": 1001, "price": 1258, "num": 1, "src":"https://img12.360buyimg.com/n7/jfs/t1/26719/27/1139//5c0f7d2dE/9d2b78523e1bada3.jpg" }, { "checked": false, "goodName": "Apple iPhone X (A1865) 64GB 深空灰色 移动联通电信4G", "goodID": 1002, "price": 9588, "num": 1, "src":"https://img13.360buyimg.com/n7/jfs/t10675/253//66891/92d54ca4/59df2e7fN86c99a27.jpg" } ] }, { "shopname": "京东非自营", "shopID": 102, // 商品 "goods": [ { "checked": false, "goodName": " 荣耀MagicBook 14英寸轻薄窄边框笔记本电脑（AMD锐龙5 8G 256G FHD IPS 正版Office）冰河银 ", "goodID": 1003, "price": 9999, "num": 4, "src":"https://img11.360buyimg.com/n7/jfs/t1/8764/35/4810//5bdbf117E/b3c83c8d840a4017.jpg" }, { "checked": false, "goodName": " Apple MacBook Air 13.3英寸笔记本电脑 银色(2017款Core i5 处理器/8GB内存/128GB闪存 MQD32CH/A) ", "goodID": 1004, "price": 15288, "num": 10, "src":"https://img11.360buyimg.com/n7/jfs/t14848/365//93902/e/5a6947e5N39e16ed8.jpg" } ] }, { "shopname": "淘宝旗舰店", "shopID": 103, // 商品 "goods": [ { "goodID": 1007, "checked": false, "goodName": "法国原瓶进口红酒 奥瑞安雄狮干红葡萄酒 单瓶 750ml ", "price": 258, "num":1, "src":"https://img14.360buyimg.com/n7/jfs/t20320/316//32913/4e1478d8/5b21e5d5Nf2360d0b.jpg" }, { "checked": false, "goodName": "海飞丝洗发水套装去屑去油500ml*2+400ml送清爽去油200ml（持久清爽控油 男士女士通用） ", "goodID": 1005, "price": 48, "num": 1, "src":"https://img14.360buyimg.com/n7/jfs/t1/6893/27/6871//5be163d6E64230eff/8a6b0b.jpg" }, { "checked": false, "goodName": "一叶子面膜 营润亮颜奢养礼盒30片 补水保湿黑面膜 去黑头 收缩毛孔 男女护肤品套装 ", "goodID": 1006, "price": 5.22, "num": 5, "src":"https://img13.360buyimg.com/n7/jfs/t1/28023/8/110//5c073bd7Ec9c95668/49093d4df4564bd1.jpg" } ] } ] 

首先，先以购物车的效果进行一个大致布局，这里要注意一下标注的内容，后期是要删除或者隐藏的。

<div class="daohang"> <ul style="border: none;"> <li style="border: none;"><input class="check" id="allIpt" type="checkbox">全选</li> <li style="margin-left: 130px;">商品信息</li> <li style="margin-left: 145px;">商品参数</li> <li style="margin-left: 77px;">单价</li> <li style="margin-left: 76px;">数量</li> <li style="margin-left: 107px;">金额</li> <li style="margin-left: 60px;">操作</li> </ul> </div> <div class="box"> <!-- <div class="shop"> <label><input type="checkbox">店铺：京东自营</label> <ul> <li> <span><input class="check" type="checkbox" /></span> <img src="https://img12.360buyimg.com/n7/jfs/t1/26719/27/1139//5c0f7d2dE/9d2b78523e1bada3.jpg" /> <p class="intro">三星 Galaxy A8s（SM-G8870） 黑瞳全视屏 6GB+128GB 外星银 全网通4G 双卡双待</p> <p class="rank">规格：默认<br>尺寸：16*16*3（cm）</p> <p class="unit">￥2980</p> <div class="amount"> <input type="button" value="-" /> <input type="number" /> <input type="button" value="+" /> </div> <p class="monry">￥2980</p> <p class="remove">移除商品</p> </li> </ul> </div> --> </div> 

css样式：

<style> *{ margin: 0; padding: 0; list-style: none; } .box{ width: 1000px; margin: 0 auto; } .box div{ margin: 0 20px; } ul{ border: 2px solid #BCBCBC; } .box div ul li{ display: flex; margin-top: 20px; border-bottom: 1px solid #BCBCBC; } .box div ul li span{ margin-left: 20px; } .box div ul li img{ width: 120px; height: 100px; margin-bottom: 20px; } .intro{ width: 210px; color: darkslategray; font-size: 14px; padding-right: 20px; padding-left: 20px; } .rank{ width: 150px; font-size: 12px; color: dimgrey; } .unit{ width: 100px; } .amount{ width: 125px; } .amount input{ width: 20px; } .amount input:nth-of-type(2){ width: 40px; margin-left: -5px; margin-right: -5px; } .monry{ width: 100px; color: red; } .remove{ width: 100px; } .daohang{ width: 960px; height: 80px; margin: 0 auto; } .daohang ul{ display: flex; border: none; } .daohang ul li{ margin-top: 50px; border-bottom: none; } </style> 

下面开始写JS的内容：

<script src="js/json.js"></script> <script> // 遍历内容,将所有购物车物品展示出来 function $(cl){ return document.getElementsByClassName(cl)[0] } json.forEach(function (item,index){ var oUl=document.createElement("ul"); item.goods.forEach(function(goods){ oUl.innerHTML += ` //引用之前写好的css样式 <li data-id="${goods.goodID}"> //${}调用json里的数据 <span><input type="checkbox" class="shopG" /></span> <img src="${goods.src}" alt=""/> <p class="intro">${goods.goodName}</p> <p class="rank">规格：默认<br>尺寸：16*16*3（cm）</p> <p class="unit">${goods.price}</p> <div class="amount"> <input type="button" value="-" onclick="add1(this,${goods.goodID})" /> <input type="number" value="${goods.num}" /> <input type="button" value="+" onclick="add2(this,${goods.goodID})" /> </div> <p class="monry">${goods.price*goods.num}</p> //对物品进行价格计算 <p class="remove" >移除商品</p> </li> ` }); $("box").innerHTML += ` <div class="sox" > <label><input data-shopID='${item.shopID}' class='shopS' type="checkbox" >店铺：${item.shopname}</label> <ul>${oUl.innerHTML}</ul> </div> ` }); </script> 

下面开始做全选：

<!-- 全选 --> <script> // 全选 function $(id){ return document.getElementById(id); } function $C(cla){ return document.getElementsByClassName(cla); } $("allIpt").onclick=function(){ var that=this; for(var i=0;i< $C("shopS").length;i++){ $C("shopS")[i].checked=this.checked; } for(var i=0;i< $C("shopG").length;i++){ $C("shopG")[i].checked=this.checked; } json.forEach(function(shop){ shop.goods.forEach(function(good){ good.checked=that.checked; }) }) } // 店铺 for(var i=0;i< $C("shopS").length;i++){ $C("shopS")[i].onclick=function(){ var that=this; var oPar = this.parentNode.parentNode; var oSon = oPar.getElementsByClassName("shopG"); for(var j=0;j< oSon.length;j++){ oSon[j].checked=this.checked; } checkAll(); // 更换数据 json.forEach(function(shop){ if(shop.shopID==that.getAttribute("data-shopID")){ shop.goods.forEach(function(good){ good.checked=that.checked; }) } }) } } // 商品 // console.log(json) for(var i=0;i< $C("shopG").length;i++){ $C("shopG")[i].onclick=function(){ var that=this; var oDiv = this.parentNode.parentNode.parentNode.parentNode; var oSon = oDiv.getElementsByClassName("shopG"); for(var i=0;i< oSon.length;i++){ if(!oSon[i].checked){ oDiv.firstElementChild.firstElementChild.checked=false; break; }else{ console.log(1) oDiv.firstElementChild.firstElementChild.checked=true; } } checkAll(); console.log(json) var goodId=this.parentNode.parentNode.getAttribute("data-id"); json.forEach(function(shop){ shop.goods.forEach(function(good){ if(good.goodID==goodId){ console.log(goodId,good.goodID) good.checked=that.checked; } }) }) } } // 判断店铺 function checkAll(){ for(var i=0;i< $C("shopS").length;i++){ if(!$C("shopS")[i].checked){ $("allIpt").checked=false; break; }else{ $("allIpt").checked=true; } } }