jQuery克隆表单后PHP接收单选按钮数据异常：仅首个字段值正常

核心原因 #

克隆表单时未正确处理单选按钮组的name属性索引和选中状态，导致后续组的单选按钮无法正常提交选中值：

• 若克隆后未更新mcq[x]中的索引x，多个组会共用同一个name，提交时仅最后一个选中的单选按钮值会被保留；
• 若克隆时复制了原组的单选按钮选中状态，新组默认可能有选中项，但用户修改后未正确触发提交逻辑；
• 部分情况是克隆后未清除原单选按钮的checked属性，导致新组无可用选中状态。

修复步骤 #

1. 修正jQuery克隆逻辑 #

确保克隆时为每个新表单组生成唯一的name索引，并清除单选按钮的选中状态：

// 假设克隆按钮的类为clone-btn
$('.clone-btn').on('click', function() {
    // 获取最后一行表单模板
    const $lastRow = $('.row').last();
    // 克隆元素（true参数保留事件绑定）
    const $newRow = $lastRow.clone(true);
    // 计算新组的索引
    const newIndex = $('.row').length;
    
    // 更新所有输入框的name属性
    $newRow.find('input').each(function() {
        const oldName = $(this).attr('name');
        // 替换旧索引为新索引
        const newName = oldName.replace(/\[(\d+)\]/, `[${newIndex}]`);
        $(this).attr('name', newName);
        
        // 清除单选按钮的选中状态
        if ($(this).is(':radio')) {
            $(this).prop('checked', false);
        }
    });
    
    // 将新行添加到表单中
    $newRow.appendTo('form');
});

2. 验证HTML结构 #

确保每个表单组内的单选按钮共享同一name（如mcq[1]），不同组的name索引唯一：

<!-- 第2组示例 -->
<div class="row">    
    <div class="col-4">
        <div class="form-group optbox">
            <input type="radio" value="1" name="mcq[1]">
            <input type="text" name="opt-a[1]" placeholder="Option 1" required>
        </div>
    </div>
    <div class="col-4">
        <div class="form-group optbox">
            <input type="radio" value="2" name="mcq[1]">
            <input type="text" name="opt-b[1]" placeholder="Option 2" required>
        </div>
    </div>
    <div class="col-4">
        <div class="form-group optbox">
            <input type="radio" value="3" name="mcq[1]">
            <input type="text" name="opt-c[1]" placeholder="Option 3" required>
        </div>
    </div>
</div>

3. PHP接收逻辑确认 #

现有PHP代码无需修改，确保$_POST['mcq']能正确接收数组：

$opts1 = $_POST['opt-a'];
$opts2 = $_POST['opt-b'];
$opts3 = $_POST['opt-c'];
$correct = $_POST['mcq'];
var_dump($correct);
// 正常输出应为类似：array(2) { [0]=>string(1) "3" [1]=>string(1) "2" }

额外检查 #

• 提交表单前确认每个组的单选按钮均已选中；
• 浏览器控制台查看表单提交的FormData，确认mcq[1]等参数是否存在；
• 若使用AJAX提交，确保序列化表单时包含所有单选按钮字段。

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