PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > Jquery教程 > 正文

    jQuery 多个checkbox选中值的ajax传递

    作者:w634381967来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:今天群里有人问到了怎么使用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('-')分隔处理即可。
    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-47-759-1.html