1：当返回值是字符串的时候
data.json:
{ "circle": "2;3;4;5;6;1" }
示例代码：
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框checkbox自定义样式</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> input[type=checkbox]{ appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; cursor: pointer; margin:0; } input[type=checkbox]{ width:13px; height:13px; background: url(images/check.png); background-size: 100% 100%; } input[type=checkbox]:checked{ background: url(images/checked.png); background-size: 100% 100%; } </style> </head> <body> <div class="modal-body form"> <div class="col-md-7 col-sm-7 col-xs-7"> <input name="circle" type="checkbox" value="2" />周一 <input name="circle" type="checkbox" value="3" />周二 <input name="circle" type="checkbox" value="4" />周三 <input name="circle" type="checkbox" value="5" />周四 <input name="circle" type="checkbox" value="6" />周五 <input name="circle" type="checkbox" value="7" />周六 <input name="circle" type="checkbox" value="1" />周日 </div> </div> </body> <script type="text/javascript"> $.ajax({ url: "data.json", type: 'GET', dataType: 'json', success: function(data) { $.each(data.circle.split(";"), function(i, item) { $('input[name="circle"][value="' + item + '"]').attr('checked', 'checked') }) } }); </script> </html>
2：当返回值是数组对象的时候
data.json:
{ "tasks": [{ "id": 1, "name": "任务一" }, { "id": 2, "name": "任务二" },{ "id": 3, "name": "任务三" },{ "id": 4, "name": "任务四" }] }
参考代码：
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框赋值</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> input[type=checkbox]{ appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; cursor: pointer; margin:0; } input[type=checkbox]{ width:13px; height:13px; background: url(images/check.png); background-size: 100% 100%; margin-right:8px; } input[type=checkbox]:checked{ background: url(images/checked.png); background-size: 100% 100%; } </style> </head> <body> <div class="workQueryList"> </div> </body> <script type="text/javascript"> $.ajax({ url: "data.json", type: 'GET', dataType: 'json', success: function(data) { //checkbox渲染 var htmlQuery = ""; $.each(data.tasks,function(i, item) { htmlQuery += '<input name="query" type="checkbox" checked="checked" value="' + item.id + '" /><span>' + item.name + '</span></br>'; }) $(".workQueryList").html(htmlQuery) } }); </script> </html>
显示如下
3：当返回值是数组字符串的时候
{ "permTokens": ["site", "alarm", "distribution", "my"], }
示例代码
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>复选框赋值</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> <style> input[type=checkbox]{ appearance:none; -moz-appearance:none; /* Firefox */ -webkit-appearance:none; cursor: pointer; margin:0; } input[type=checkbox]{ width:13px; height:13px; background: url(images/check.png); background-size: 100% 100%; margin-right:8px; } input[type=checkbox]:checked{ background: url(images/checked.png); background-size: 100% 100%; } </style> </head> <body> <div class="col-md-5 col-sm-5 col-xs-5 workModelList"> <input type="checkbox" name='appModel' value="site">位置 <input type="checkbox" name='appModel' value="alarm">告警 <input type="checkbox" name='appModel' value="distribution">分布 <input type="checkbox" name='appModel' value="my">我的 <input type="checkbox" name='appModel' value="work">作业管理 <input type="checkbox" name='appModel' value="partol">电子巡更 <input type="checkbox" name='appModel' value="person">员工管理 </div> </body> <script type="text/javascript"> $.ajax({ url: "data.json", type: 'GET', dataType: 'json', success: function(data) { $.each(data.permTokens, function(i, item) { $('input[value="' + item + '"]').attr("checked", "checked") }) } }); </script> </html>
