牛骨文教育服务平台(让学习变的简单)
博文笔记

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

创建时间:2016-05-25 投稿人: 浏览次数:9017


                           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>

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



声明:该文观点仅代表作者本人,牛骨文系教育信息发布平台,牛骨文仅提供信息存储空间服务。