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

如何解决jQuery序列化收集倍数形式按名称分组值

如何收集输入形式的倍数并将输出分组为按名称组合值的字符串

例如：

<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>

如何获取输出将是字符串或类似的内容

// field_name：[值]

我正在尝试这样：

$('.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序列化或每个 功能?? 感谢您的关注

解决方法

您可以使用: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