您的位置:首页 > Web前端 > JQuery

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

2018-01-12 11:05 1076 查看
一、复选框选中、反选、全选、全不选

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;
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐