jQuery数据结构渲染（4）：复选框checkbox赋值
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>
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读