使用数组式命名时如何处理未勾选的复选框

问题背景 #

我有一个表格形式的动态表单，通过JavaScript实现模板行的复制/删除功能，允许用户按需添加行。简化后的模板行代码如下：

<tr data-being_removed="false" data-type="pickup" id="stop_table_row_template" style="display: none;">
    <td>
        <div class="input-group" style="margin: 0px;">
            <input type="text" placeholder="Pickup Number" class="form-control form-control-sm" name="stops[stop_number][]">
            <div class="input-group-text">
                <input class="form-check-input mt-0" name="stops[require_appointment][]" type="checkbox" value="1">
                &nbsp;Req. Appt.
            </div>
        </div>
        <select placeholder="Location" class="form-select ship_to_selector form-control-sm mt-1" name="stops[location_id][]">
            <option value="">Location</option>
        </select>
    </td>
</tr>

当前遇到的问题是：复选框未勾选时不会被提交到服务器，导致表单数据的隐含索引错位。比如用户添加3行，仅第二行勾选复选框，服务器会认为该复选框值属于第一行（因为第一行没有同名字段提交）。我希望避免在name属性中指定固定索引，同时实现未勾选复选框时提交值0，勾选时提交值1的效果。

解决方案 #

方法1：隐藏输入+行内状态同步 #

在模板行中给每个复选框配对一个同名隐藏输入，默认值设为0，再通过JavaScript监听复选框的状态变化，同步更新隐藏输入的值。这样无论复选框是否勾选，都会有对应的值提交，且与同其他字段的索引保持一致。

修改后的模板行代码：

<tr data-being_removed="false" data-type="pickup" id="stop_table_row_template" style="display: none;">
    <td>
        <div class="input-group" style="margin: 0px;">
            <input type="text" placeholder="Pickup Number" class="form-control form-control-sm" name="stops[stop_number][]">
            <div class="input-group-text">
                <!-- 新增隐藏输入，默认值为0 -->
                <input type="hidden" name="stops[require_appointment][]" value="0">
                <input class="form-check-input mt-0" type="checkbox" value="1">
                &nbsp;Req. Appt.
            </div>
        </div>
        <select placeholder="Location" class="form-select ship_to_selector form-control-sm mt-1" name="stops[location_id][]">
            <option value="">Location</option>
        </select>
    </td>
</tr>

同步逻辑的JavaScript代码：

// 监听所有复选框的状态变化（包括动态添加的行）
document.addEventListener('change', function(e) {
    if (e.target.classList.contains('form-check-input')) {
        // 找到同组的隐藏输入
        const hiddenInput = e.target.previousElementSibling;
        if (hiddenInput && hiddenInput.type === 'hidden') {
            hiddenInput.value = e.target.checked ? '1' : '0';
        }
    }
});

方法2：表单提交时手动构建FormData #

如果不想修改模板HTML，可以在表单提交时，遍历所有有效行，手动收集每个字段的值（包括复选框的0/1），再通过FormData提交，确保每行的所有字段都被包含，索引完全对应。

JavaScript代码：

// 监听表单提交事件
document.querySelector('form').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData();
    
    // 遍历所有有效行：排除模板行和标记为删除的行
    document.querySelectorAll('tr[data-type="pickup"]:not([id="stop_table_row_template"]):not([data-being_removed="true"])').forEach(row => {
        // 收集Pickup Number
        const stopNumber = row.querySelector('input[name="stops[stop_number][]"]').value;
        formData.append('stops[stop_number][]', stopNumber);
        
        // 收集复选框状态：勾选为1，否则为0
        const reqAppt = row.querySelector('.form-check-input').checked ? '1' : '0';
        formData.append('stops[require_appointment][]', reqAppt);
        
        // 收集Location ID
        const locationId = row.querySelector('select[name="stops[location_id][]"]').value;
        formData.append('stops[location_id][]', locationId);
    });
    
    // 提交表单数据（示例用fetch，可替换为XMLHttpRequest）
    fetch(this.action, {
        method: this.method,
        body: formData
    }).then(response => {
        // 处理提交后的响应逻辑
    });
});

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