js中将多个checkbox的值传处理并传到后台

最新推荐文章于 2023-09-22 18:41:05 发布

Vashon@青衫烟雨客

最新推荐文章于 2023-09-22 18:41:05 发布

阅读量2.9w

点赞数 5

分类专栏：前端

本文链接：https://blog.csdn.net/yangwenxue_admin/article/details/51501010

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

js中将多个checkbox的值传处理并传到后台

前台的东西也需要引起重视，在日常开发中觉得有必要做笔记的就总结记下，日后用到便于查找。

jsp页面代码如：

<c:forEach items="${obj.rows}" var="list" varStatus="row" >
    <tr>
	<td align="center">
		<c:if test="${list.shareType eq '0'}">
			<input type="checkbox" disabled="disabled"/>
		</c:if>
		<c:if test="${list.shareType eq '1' || list.shareType eq '2'}">
			<input type="checkbox" name="apiContent" value="${list.fieldCode}"/>
		</c:if>
	</td>
	<td align="center">${list.fieldName}</td>
	<td align="center">
		<c:if test="${list.shareType eq '0'}">不共享</c:if>
		<c:if test="${list.shareType eq '1'}">普通共享</c:if>
		<c:if test="${list.shareType eq '2'}">按需共享</c:if>
	</td>
   </tr>
</c:forEach>

在循环列出的所有资源项中，将勾选的checkbox的值拼接成字符串传到后台：

function nextStep(){
	var box = document.getElementsByName("apiContent");
	var objArray = box.length;
	var apiContentStr="";
	
	for(var i=0;i<objArray;i++){
		if(box[i].checked == true){
			apiContentStr += box[i].value+",";
		} 
	}
	if(apiContentStr == "" || apiContentStr.length == 0){
		alert("请勾选需要的资源项!");
		return;
	}
	apiContentStr = apiContentStr.substring(0, apiContentStr.length-1);
	
	$('#MainForm').attr('action', '${ctx}/api/toEditApply?apiContentStr='+apiContentStr);
	$('#MainForm').submit();
	
}

附加内容：校验复选框，并ajax修改标记。

//提交审核
function tijiaoCheck(applyBatch){
	if($("input[type='checkbox']").is(':checked')){
		alert("确定同意该协议!");
		$.post("${ctx}/api/submit?applyBatch="+applyBatch,
			{ Action: "post"},
			function(data, textStatus){
			 data = eval('('+data+')');
			 if(data == '1'){
			     alert("提交成功!");
			     $('#MainForm').attr('action', '${ctx}/api/reloadAgreement?applyBatch='+applyBatch);
				$('#MainForm').submit();
			  }else{
			     alert("提交失败!");
					}
			});
	}else{ 
		alert("是否阅读并同意该协议!");
		
	}
}

<div style="height:20px;padding-top: 5px;text-align: center">
	<c:if test="${obj.apiApply.isSubmit != '1'}">
		<input type="checkbox" id="xieyibox"/>已阅读协议并同意协议条款
	</c:if>
</div>

做过了总得有必要记录下来，这就是学习笔记了。