jQuery选checkbox中的值

怎么使用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(‘-‘)分隔处理即可。

强调一点:我们的目的是解决问题。写法很简单,希望对大家有所帮助,如果你有其他好的方法,欢迎和大家在jQuery学习网站进行分享。

jQuery选checkbox中的值

Leave a Reply