正文

springMvc接收ajax数组参数，以及jquery复选框选中、反选、全选、全不选

IP云
IP云V管理员/4 阅读
10/30
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

一、复选框选中、反选、全选、全不选

html代码：

<input type='checkbox' name='menuCheckBox' value='10' >苹果
<input type='checkbox' name='menuCheckBox' value='20' >香蕉

JS 选中某个复选框：

$("input:checkbox[name='menuCheckBox'][value='10']").each(function () {
this.checked = true;
})

JS 反选某个复选框（选中就反选为不选中，没选中就反选为选中）：

$("input:checkbox[name='menuCheckBox'][value='10']").each(function () {
this.checked = !this.checked;
})

JS 全选复选框：

$("input:checkbox[name='menuCheckBox']").each(function () {
this.checked = true;
})

JS 全不选复选框：

$("input:checkbox[name='menuCheckBox']").each(function () {
this.checked = false;
})

JS 获取复选框选中的值：

var menuArr = [];
$("input:checkbox[name='menuCheckBox']").each(function () {
if(this.checked){
menuArr.push($(this).attr("value"));
}
})

二、前端Ajax请求代码，包含数组参数

var param = {};
var menuArr = new Array();
$("input:checkbox[name='menuCheckBox']").each(function () {
if(this.checked) {
menuArr.push($(this).attr("value"));
}
});
param["menuArr"] = menuArr; //请求数组参数，参数对象：menuArr
param["menuList"] = menuArr; //请求数组参数，参数对象：menuList
$.ajax({
url: "/saveXXX",
type:"POST",
dataType: "json", //这个很重要！
data: param,
success: function(result, textStatus, jqXHR){
//请求成功！
}
});

三、springMvc后台接收数组参数

@RequestMapping("/user/saveAccountMenuWeb")
@ResponseBody //返回json到前端，而不是让前端跳转到新页面
public String saveAccountMenuWeb(
,@RequestParam(value = "menuArr[]",required=false ) String[] menuArr
,@RequestParam(value = "menuList[]",required=false) List menuList){ //required=false 是因为允许提交一个空数组作为接收参数，因为有时候用户真的是什么都没选 LOG.info("能接收到参数哦！！menuArr=="+JSONObject.toJSONString(menuArr));
LOG.info("也！能接收到参数哦！！menuList=="+JSONObject.toJSONString(menuList)); Map map = new HashMap();
map.put("flag","success");
return map;
}