虽然作为后端程序员,简单的CSS样式还是要会滴,备份下
1.直接贴代码吧:
@{
ViewBag.Title = "Index";
Layout = null;
}
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<style type="text/css">
.box-wrap {
padding: 20px;
width: 2000px;
}
.box-wrap > div {
padding: 0 0 10px;
font-size: 14px;
color: #333;
}
.box-wrap > div span {
display: inline-block;
margin-right: 5px;
}
.box-wrap > div label {
display: inline-block;
}
.box-wrap > div input {
border-radius: 3px;
padding: 4px 10px;
font-size: 14px;
width: 200px;
border: 1px solid #e0e0e0;
}
.box-wrap > div select {
border: 1px solid #e0e0e0;
padding: 4px;
margin-right: 5px;
min-width: 100px;
}
.box-wrap .box-checkbox label {
margin-bottom: 10px;
margin-right: 10px;
width: 330px;
}
.box-wrap .box-checkbox input {
width: auto;
vertical-align: baseline;
margin-right: 3px;
}
.btnSave button {
border: none;
background: #507fff;
width: 150px;
height: 35px;
line-height: 35px;
color: #fff;
border-radius: 3px;
font-size: 16px;
margin: auto;
display: block;
margin-top: 30px;
}
</style>
<div class="box-wrap">
<div><span>级别:</span><label>3</label></div>
<div><span>标题:</span><label><input id="txtName"></label></div>
<div>
<span>子级:</span>
<label>
<select id="twoSelect">
<option value="-1">请选择0 级车型库</option>
</select>
<select id="twoSelect">
<option value="-1">请选择1级车型库</option>
</select>
<select id="threeSelect">
<option value="-1">请选择2级车型库</option>
</select>
</label>
</div>
<div id="content">
<div class="box-checkbox">
</div>
</div>
<div class="btnSave"><button id="btnSave">保存</button></div>
</div>
<script>
$(function () {
var getId = $(this).val();
var r = { "success": true, "fourList": [{ "fourId": 18637, "fourName": "2014款 Sportback 35 TFSI 自动进取型" }, { "fourId": 18638, "fourName": "2014款 Sportback 35 TFSI 自动时尚型" }, { "fourId": 18639, "fourName": "2014款 Sportback 35 TFSI 自动舒适型" }, { "fourId": 16571, "fourName": "2014款 Sportback 35 TFSI 自动豪华型" }, { "fourId": 20245, "fourName": "2014款 Limousine 35 TFSI 自动进取型" }, { "fourId": 20246, "fourName": "2014款 Limousine 35 TFSI 自动时尚型" }, { "fourId": 20247, "fourName": "2014款 Limousine 35 TFSI 自动舒适型" }, { "fourId": 20248, "fourName": "2014款 Limousine 35 TFSI 自动豪华型" }, { "fourId": 18658, "fourName": "2015款 Sportback 35 TFSI 手动进取型" }, { "fourId": 21567, "fourName": "2015款 Sportback 40 TFSI 自动舒适型" }, { "fourId": 21568, "fourName": "2015款 Sportback 40 TFSI 自动豪华型" }, { "fourId": 21598, "fourName": "2015款 Limousine 35 TFSI 手动进取型" }, { "fourId": 21569, "fourName": "2015款 Limousine 40 TFSI 自动舒适型" }, { "fourId": 21570, "fourName": "2015款 Limousine 40 TFSI 自动豪华型" }, { "fourId": 22883, "fourName": "2015款 Sportback 35 TFSI 百万纪念智领型" }, { "fourId": 22884, "fourName": "2015款 Limousine 35 TFSI 百万纪念智领型" }, { "fourId": 22885, "fourName": "2015款 Sportback 35 TFSI 百万纪念舒享型" }, { "fourId": 22886, "fourName": "2015款 Limousine 35 TFSI 百万纪念舒享型" }, { "fourId": 22887, "fourName": "2015款 Sportback 35 TFSI 百万纪念乐享型" }, { "fourId": 22888, "fourName": "2015款 Limousine 35 TFSI 百万纪念乐享型" }, { "fourId": 25898, "fourName": "2016款 Sportback 35 TFSI 进取型" }, { "fourId": 25899, "fourName": "2016款 Sportback 35 TFSI 领英型" }, { "fourId": 25900, "fourName": "2016款 Sportback 35 TFSI 风尚型" }, { "fourId": 25901, "fourName": "2016款 Sportback 40 TFSI 风尚型" }, { "fourId": 25902, "fourName": "2016款 Sportback 40 TFSI 豪华型" }, { "fourId": 25903, "fourName": "2016款 Limousine 35 TFSI 进取型" }, { "fourId": 25904, "fourName": "2016款 Limousine 35 TFSI 领英型" }, { "fourId": 25905, "fourName": "2016款 Limousine 35 TFSI 风尚型" }, { "fourId": 25906, "fourName": "2016款 Limousine 40 TFSI 风尚型" }, { "fourId": 25907, "fourName": "2016款 Limousine 40 TFSI 豪华型" }, { "fourId": 27076, "fourName": "2016款 Sportback 35 TFSI 特别版" }, { "fourId": 27078, "fourName": "2016款 Limousine 35 TFSI 特别版" }] };
var html = '';
$.each(r.fourList, function (index, ele) {
html += '<label>' + ele.fourName + '<input name="idck" type="checkbox" id="' + ele.fourId + '"/></label>';
})
$(".box-checkbox").html(html);
})
</script>
2.效果: