jquery序列化收集按名称分组值的倍数形式

Question

如何收集多个表单输入并将输出分组为按名称组合值的字符串

例如：

<div class="register">
    <input type="text" name="full_name">
    <textarea name="address"></textarea>
    <input type="radio" name="sex" value="male">
    <input type="radio" name="sex" value="female">
    <input type="checkbox" name="hobies" value="foodball">
    <input type="checkbox" name="hobies" value="basketball">
    <input type="button" class="submit" value="Submit">
</div>

如何获得输出将是字符串或类似的东西

// 字段名：[值]

我正在尝试这样：

$('.submit').click(function(){
    var InputCollect = $('.register').find(':input');

    $(InputCollect).each(function(){
        names = $(this).attr('name');
        values = $(this).attr('value');
    
        // the output will be string or something like this:
    
        // full_name: jhon doe
        // address: some street
        // gender: male
        // hobies: football, basketball (combine multiple values:not if checked)
    });
});

我不知道如何按名称对多个值进行分组

产生该输出的最佳方法是什么.. 使用 jQuery 序列化或每个 功能 ？？ 感谢关注

Answer 1

您可以使用:checked 找到选中的复选框。然后，您可以将它们放入键值存储中，其中键是复选框的名称，值是选定复选框的数组：

$('.submit').click(function(){
    var InputCollect = $('.register').find(':input');
    let form = {}
    $('input[type=text], textarea, input[type=radio]:checked', '.register').each(function(){
        const name = $(this).attr('name');
        const value = $(this).val();
        if(value.trim() !== '') {
            form[name] = value;
        }
    });
    
    $('input[type=checkbox]:checked', '.register').each(function(){
        const name = $(this).attr('name');
        const value = $(this).val();
        if(form[name] === undefined) {
            form[name] = [value];
        } else {
            form[name].push(value);
        }
    });
    
    console.log(form);
});

这里我不得不将逻辑拆分为两个回调，因为处理文本输入和单选与处理复选框不同，尽管您仍然可以根据需要将它们合并到一个回调中。

JS fiddle link