导读:今天群里有人问到了怎么使用jQuery ajax传递多个checkbox的选中值,相信看过jQuery文档的同学并不陌生,但对很多刚进行jQuery学习的同学还...
今天群里有人问到了怎么使用jQuery ajax传递多个checkbox的选中值,相信看过jQuery文档的同学并不陌生,但对很多刚进行jQuery学习的同学还是有点难度。今天将这个问题在这记录一下,方便以后碰到这个问题的朋友。
比如有下边的html
<input type="checkbox" name="student" value="1" data-age="18" />
<input type="checkbox" name="student" value="2" data-age="19" />
<input type="checkbox" name="student" value="3" data-age="20" />
1.使用serialize()方法传递多个checkbox选中值
var student = $("input[name='student']:checked").serialize();
$.ajax({
url: "your-url",
type: "post",
data: student,
success: function (result) {
//handle
}
});
这样在后台我们使用Request["student"]即可获得checkbox的选中值,得到值如"1,3"。
2.通过数组参数的方式传递多个checkbox选中值
var student = { 'info': [] };
$("input[name='student']:checked").each(function (i, n) {
student['info'].push(n.value);
});
这种写法相当于请求url为&=info[]=1&info[]=3这种形式,get方式不支持,后台获取checkbox选中值使用Request["info[]"],得到如"1,3"。问到到这里已经解决了,但有的朋友可能不仅要获取value,他还想获取checkbox上其他一些附加属性(有时我们要考虑设计是否合理??)。如他可能想获取checkbox的data-age属性值。在这里我仅给出一个思路:
var student = { 'info': [] };
$("input[name='student']:checked").each(function (i, n) {
//将value age通过"-"拼起来
student['info'].push(n.value + '-' + $(n).attr('data-age'));
});
同样后台使用Request["info[]"]方式得到如"1-18,3-20"的值,到这里你应该会处理了吧,使用Split(',')分隔后,遍历得到的数组,再用Split('-')分隔处理即可。