复选框checkbox提交数据类型和方法
1：复选框checkbox提交字符串类型
示例代码：
<!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>
</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>
<button type="button" class="btn blue" id="addBtn">保存</button>
</body>
<script type="text/javascript">
$("#addBtn").on("click", function () {
var params = {
circle: getTaskIds(),
}
alert(JSON.stringify(params))
$.ajax({
url: basePath + "/works/fence",
contentType: 'application/json',
data: JSON.stringify(params),
type: "POST",
success: function (data) {
}
});
})
//获取checkbox选中的周期时间
function getTaskIds() {
var taskIds = new Array(); //创建list集合
$("input[name='circle']").each(function (i, value) {
if ($(this).prop("checked") == true) {
taskIds.push($(this).val());
}
});
return taskIds.join(';');
}
</script>
</html>2:复选框checkbox提交，对象数组类型
<!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>
</style>
</head>
<body>
<div class="col-sm-4" >
<input type="text" value="09:00" class="form-control beginTime" name="stime"></input>
<input type="text" value="17:30" class="form-control endTime" name="etime"></input>
</div>
<div class="col-sm-4" >
<input type="text" value="09:00" class="form-control beginTime" name="stime"></input>
<input type="text" value="17:30" class="form-control endTime" name="etime"></input>
</div>
<button type="button" class="btn blue" id="addBtn">保存</button>
</body>
<script type="text/javascript">
$("#addBtn").on("click", function() {
var params = {
times: getTimes(),
}
alert(JSON.stringify(params))
$.ajax({
url: basePath + "/works/fence",
contentType: 'application/json',
data: JSON.stringify(params),
type: "POST",
success: function(data) {}
});
})
//获取日历时间周期
function getTimes() {
var times = new Array(); //创建list集合
$("input[name='stime']").each(function(i, value) {
var obj = {};
obj.stime = $(this).val();
times.push(obj);
});
$("input[name='etime']").each(function(i, value) {
times[i].etime = $(this).val();
});
return times;
}
</script>
</html>3：当提交数据类型是字符串数组的时候
实例代码
<!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>
</style>
</head>
<body>
<div class="row">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<label class="col-md-2 col-sm-2 col-xs-2 control-label">模块
</label>
<div class="col-md-5 col-sm-5 col-xs-5">
<input type="checkbox" name='appModel' value="site" checked="checked">位置
<input type="checkbox" name='appModel' value="alarm">告警
<input type="checkbox" name='appModel' value="distribution" checked="checked">分布
<input type="checkbox" name='appModel' value="my" checked="checked">我的
<input type="checkbox" name='appModel' value="work">作业管理
<input type="checkbox" name='appModel' value="partol">电子巡更
<input type="checkbox" name='appModel' value="person">员工管理
</div>
</div>
</div>
</div>
<button type="button" class="btn blue" id="addBtn">保存</button>
</body>
<script type="text/javascript">
$("#addBtn").on("click", function() {
var params = {
permTokens: getWorkQuery()
}
alert(JSON.stringify(params))
$.ajax({
contentType: 'application/json',
url: basePath + "/app",
data: JSON.stringify(params),
type: "post",
success: function(data) {
},
error: function(data) {
}
});
//获取检查项checkbox选中的
function getWorkQuery() {
var workQuery = new Array(); //创建list集合
$("input[name='appModel']:checked").each(function(i, value) {
workQuery.push($(this).val());
});
return workQuery;
}
})
</script>
</html>对应的渲染方法如下：
jQuery数据结构渲染（4）：复选框checkbox赋值
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
