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小提琴鏈接