多选框
### 获取多选框数据
这里以商品标签多选为例
### HTML 模板
```html
<div class="layui-tab-item layui-show">
<div class="layui-row icon-update" id="saleLabelList"></div>
</div>
```
### JS 代码
#### 请求获取商品标签数据, 存入数组中
```javascript
getSaleLabel();
function getSaleLabel(callback) {
onion.ajax.post(url,function (res) {
if (res) {
var saleLablesData = new Array();
var labelList = res.data.list; // 可能不是list
for (var i = 0; i < labelList.length; i++) {
var temp = {};
temp.id = labelList[i].id;
temp.name = labelList[i].labelName;
temp.isSelected = false; // 非选中
saleLablesData.push(temp);
}
renderSaleLabel(saleLablesData); // 渲染多选框至页面的函数
}
})
}
```
### 多选框数据回显
根据数组, 渲染商品标签
```javascript
function renderSaleLabel(saleLableData) {
for (var i = 0; i < saleLableData.length; i++) {
// 这里的 labelIds 为接口返回的已有选择, 为数据回显的时候使用
for (var j = 0; j < labelIds.length; j++) {
if (saleLableData[i].id === labelIds[j]) {
saleLableData[i].isSelected = true // 设为已选
}
}
}
// 获取容器, 渲染单个复选框
$('#saleLabelList').html(renderSaleLableTemp(saleLableData));
form.render(); // 重新渲染表单, 不能漏
};
```
### 渲染单个多选框
通过拼接html来渲染
```javascript
function renderSaleLableTemp(res) {
var result = '';
for (var i = 0; i < res.length; i++) {
var temp = '<div class="layui-col-xs6 layui-col-sm3 mt10">'+
+'<input type="checkbox" '
+ (res[i].isSelected ? "checked" : '') +
' value="' + res[i].id + '" title="' + res[i].name +
'" lay-skin="primary" disabled></div>';
result += temp;
}
return result;
}
```