<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
<script type="text/javascript" src="./js/template-web.js">script>
head>
<body>
<div id="root">div>
<script id="specificationTemp" type="text/html">
{{each commodityClassPos as itemObj i}}
<div style='display: flex;' >
<div class="item">{{itemObj.attributeName}}</div>
{{each itemObj.attributeValuePo as attributeValuePoObj j}}
<div class="em">
<input type="checkbox" name="" id="" onclick='selectAttObj({{attributeValuePoObj}}, {{itemObj}}, this)' value="{{attributeValuePoObj.id}}"><span>{{attributeValuePoObj.attributeValueName}}</span>
</div>
{{/each}}
</div>
{{/each}}
script>
<script>
var data = {
"commodityClassPos": [
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566543917000,
"updateBy": null,
"updateTime": null,
"attributeId": "100002801000006",
"attributeName": "套餐",
"flId": null,
"remark": null,
"soft": "3",
"attributeValuePo": [
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566543998000,
"updateBy": null,
"updateTime": null,
"attributeValueId": "100002801000007",
"attributeId": "100002801000006",
"attributeValueName": "套餐一",
"remark": null,
"id": "100002801000007"
},
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566544015000,
"updateBy": null,
"updateTime": null,
"attributeValueId": "100002801000008",
"attributeId": "100002801000006",
"attributeValueName": "套餐二",
"remark": null,
"id": "100002801000008"
},
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566544030000,
"updateBy": null,
"updateTime": null,
"attributeValueId": "100002801000009",
"attributeId": "100002801000006",
"attributeValueName": "套餐三",
"remark": null,
"id": "100002801000009"
}
],
"id": "100002801000006"
},
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566543884000,
"updateBy": null,
"updateTime": null,
"attributeId": "100002801000005",
"attributeName": "规格",
"flId": null,
"remark": null,
"soft": "2",
"attributeValuePo": [],
"id": "100002801000005"
},
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566543872000,
"updateBy": null,
"updateTime": null,
"attributeId": "100002801000004",
"attributeName": "颜色",
"flId": null,
"remark": null,
"soft": "1",
"attributeValuePo": [
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566544041000,
"updateBy": null,
"updateTime": null,
"attributeValueId": "100002801000010",
"attributeId": "100002801000004",
"attributeValueName": "红色",
"remark": null,
"id": "100002801000010"
},
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566544053000,
"updateBy": null,
"updateTime": null,
"attributeValueId": "100002801000011",
"attributeId": "100002801000004",
"attributeValueName": "绿色",
"remark": null,
"id": "100002801000011"
},
{
"pk": null,
"name": null,
"createBy": null,
"createTime": 1566544062000,
"updateBy": null,
"updateTime": null,
"attributeValueId": "100002801000012",
"attributeId": "100002801000004",
"attributeValueName": "黄色",
"remark": null,
"id": "100002801000012"
}
],
"id": "100002801000004"
}
],
"list": null
};
var html = template('specificationTemp', data);
document.getElementById('root').innerHTML = html;
script>
body>
html>
![在这里插入图片描述](http://img.e-com-net.com/image/info8/4dd6ff7f6b114bddaa25a7ddda0875de.png)