在AJAX调用中传递多个复选框值

Question

我使用三元运算符来检查已选中表单中的哪些复选框。 如果选择了一个值，则将“名称/值”对附加到查询字符串上，然后在AJAX调用中将其传递。 如果没有，我会附上一个带有空字符串值的名称。

它工作正常，我只是想知道是否有更紧凑/优雅的方法来执行此操作，因为它似乎有些冗长。 我想知道是否可以使用for循环。 我不确定这是否行得通，原因是它涉及根据索引在循环内动态分配变量名。

    var fields = $('input[name="apn"]').serializeArray();
    var apn1 = fields[0] ? fields[0]["value"] : '' 
    query += '&apn1=' + apn1;
    var apn2 = fields[1] ? fields[1]["value"] : '' 
    query += '&apn2=' + apn2;
    var apn3 = fields[2] ? fields[2]["value"] : '' 
    query += '&apn3=' + apn3;
    var apn4 = fields[3] ? fields[3]["value"] : '' 
    query += '&apn4=' + apn4;
    var apn5 = fields[4] ? fields[4]["value"] : '' 
    query += '&apn5=' + apn5;
    ...

Answer 1

将值和索引映射到对象数组，然后将其直接传递到$ .ajax，jQuery将在其上使用$ .param：

var fields = $.map($('input[name="apn"]'), function(el, i) {
    var o = {};
    o['apn' + i] = el.value;
    return o;
});

Answer 2

如果只是复选框：

$('input[name="apn"]').each(function (i, el) {
    if($(el).is(':checked')) {
        query += '&apn'+i+'=' + el.value;
    }
});

Answer 3

您可以简单地序列化表格：

var query = $("#FormId").serialize();