Vanilla JavaScript表单序列化无法获取多选复选框全部值的解决方法

原代码的问题在于使用了FormData.get(key)方法，这个方法只会返回指定键对应的第一个值，当多个复选框使用同一个name（比如choice[]）时，无法获取全部选中的值。我们需要改用FormData.getAll(key)来获取该键对应的所有值，再根据值的数量决定是存为数组还是单个值。

修改后的序列化函数如下：

var serializeForm = function (form) {
    var obj = {};
    var formData = new FormData(form);
    for (var key of formData.keys()) {
        const values = formData.getAll(key);
        // 如果对应多个值，存为数组；单个值则直接存值
        obj[key] = values.length > 1 ? values : values[0];
    }
    return obj;
};

document.querySelector('#form').addEventListener('submit', function(e) {
    e.preventDefault();
    let data = JSON.stringify(serializeForm(e.target));
    console.log(data);
});

逻辑说明 #

1. 遍历FormData的所有键，对每个键调用getAll(key)获取所有关联的值；
2. 判断值的数量：如果数量大于1（比如多个复选框选中），就将数组直接赋值给对象的对应键；如果只有一个值，就取数组的第一个元素（保持单个值的格式和原逻辑一致）；
3. 这样处理后，无论是单个还是多个复选框选中，都能正确获取对应的值。

测试你的表单，提交后控制台会输出类似{"choice[]":["lorem","ipsum"]}的结果，所有选中的复选框值都会被包含在内。

内容的提问来源于stack exchange，提问作者user19103974