网上有很多关于前端checkbox数据怎样传送给后台(action)的实例,但是很少有通过后台数据来控制前端checkbox的是否选中的例子,最近项目中就碰到这个问题
解决办法:
1、后台编写异步方法,获取value集合
-
public String returnCheckbox(){
-
//获取value集合
-
List<Integer> checklauser = serclassService.selectlsidBycid(cid);
-
JSONObject json = new JSONObject();
-
//放进json中
-
json.put("checkboxlist", checklauser.toString());
-
//将json返回到也main
-
returnJson(json.toString());
-
return "jsonresult";
-
}
2、前台编写异步方法
-
function getCheckbox(cid){
-
$.ajax({
-
type: "post",
-
url: "classification!returnCheckbox.action?cid="+cid,
-
async:true,
-
dataType: "json",
-
success: function(data){
-
//这个地方搞了好久,用split()页面上报split is not a function错误
-
//后面在国外的网站上建议 在字符串后面加 +'',然后问题就解决了 @zhangll
-
var str = data.checkboxlist+'';
-
//异步获取选中记录中包含的lsid分类集合,遍历集合,如果集合中的值与checkbox的value值相同,则选中
-
$(str.split(",")).each(function (i,dom){
-
$(":checkbox[value='"+dom+"']").prop("checked",true);
-
});
-
}
-
});
-
};
注:var str = data.checkboxlist+'',这里我在做这块的时候页面一直报 split not a function错误,加了这个单引号,就不会有这个问题了。
3、编写 jsp页面,这里的checkbox我是从后台的list中遍历出来的
-
<label id="label">
-
服务范围
-
</label>
-
<c:forEach var="lauserVo" items="${listlauserVo}" varStatus="status">
-
<input type="checkbox" name="checklauser" value="${lauserVo.lsid}" />${lauserVo.lsname}
-
<!--下面c:if标签可以控制每四个checkbox换行-->
-
<c:if test="${status.count % 4 == 0}">
-
<br/>
-
</c:if>
-
</c:forEach>
效果如下,勾选的value值全部是由后台传进来的
显示推荐内容
参考链接:https://blog.csdn.net/long19901216/article/details/51374064