js调用json里面的数据，以及购物车的全选

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/321364/5c0f7d2dE26654912/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/1344769770/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/207189/5bdbf117E35599536/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/2076510540/93902/e5883831/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/1220830999/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/296473/5be163d6E64230eff/8a6b0b1044407322.jpg"
            },
            {
                "checked": false,
                "goodName": "一叶子面膜 营润亮颜奢养礼盒30片 补水保湿黑面膜 去黑头 收缩毛孔 男女护肤品套装      ",
                "goodID": 1006,
                "price": 5.22,
                "num": 5,
                "src":"https://img13.360buyimg.com/n7/jfs/t1/28023/8/110/249489/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/321364/5c0f7d2dE26654912/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;
					}
				}	
			}