Django内联表单集：Checked=true与同元素事件冲突致复选框无法勾选

问题根源 #

你遇到的问题核心在于updateSunForm()函数直接通过替换innerHTML来重命名表单ID，这会重新创建DOM元素——你之前设置为checked=true的DELETE复选框会被新生成的、无checked属性的元素覆盖，虽然控制台显示旧元素的checked状态为true，但实际提交的是新元素的默认值（未勾选）。

修复方案 #

放弃用innerHTML替换的方式更新表单编号，改为遍历每个表单内的控件，逐个修改id和name属性，这样能完整保留控件的状态（包括复选框的勾选状态）。同时同步更新formset管理表单的相关字段。

修改后的JavaScript代码 #

const sunFormCollection = document.getElementsByClassName('sun_time_slot_form');
const mainForm = document.querySelector('#all-add-form');
const addSunBtn = document.querySelector("#add-sun-form");
const submitFormBtn = document.querySelector('[type="submit"]');
const totalForms = document.querySelector("#id_sunday_formset-TOTAL_FORMS");
const initialForms = document.querySelector("#id_sunday_formset-INITIAL_FORMS");

let formCount = sunFormCollection.length;

// 添加新表单逻辑
addSunBtn.addEventListener('click', function (e) {
    e.preventDefault();

    const newSunForm = sunFormCollection[0].cloneNode(true);
    const formIdRegex = RegExp(`id_sunday_formset-(\\d+)-`, 'g');
    const formNameRegex = RegExp(`sunday_formset-(\\d+)-`, 'g');

    // 替换新表单内控件的id和name
    newSunForm.innerHTML = newSunForm.innerHTML.replace(formIdRegex, `id_sunday_formset-${formCount}-`);
    newSunForm.innerHTML = newSunForm.innerHTML.replace(formNameRegex, `sunday_formset-${formCount}-`);
    
    // 重置新表单的状态
    const deleteCheckbox = newSunForm.querySelector('input[id$="-DELETE"]');
    if (deleteCheckbox) deleteCheckbox.checked = false;
    const inputs = newSunForm.querySelectorAll('input[type="text"], input[type="time"]');
    inputs.forEach(input => input.value = '');

    mainForm.insertBefore(newSunForm, submitFormBtn);
    formCount++;
    totalForms.setAttribute('value', formCount);
});

// 更新表单编号的核心函数（修改后）
function updateSunForm() {
    let count = 0;
    // 仅处理可见表单，跳过已标记删除的项
    for (let sun_form of sunFormCollection) {
        if (sun_form.style.display !== 'none') {
            // 遍历表单内所有带formset前缀的控件
            const elements = sun_form.querySelectorAll('[id^="id_sunday_formset-"], [name^="sunday_formset-"]');
            elements.forEach(el => {
                // 修改id属性
                el.id = el.id.replace(/id_sunday_formset-\d+-/, `id_sunday_formset-${count}-`);
                // 修改name属性
                if (el.name) {
                    el.name = el.name.replace(/sunday_formset-\d+-/, `sunday_formset-${count}-`);
                }
            });
            count++;
        }
    }
    // 同步更新管理表单字段
    totalForms.setAttribute('value', count);
    if (initialForms) {
        initialForms.setAttribute('value', Math.min(count, parseInt(initialForms.getAttribute('value'))));
    }
}

// 删除表单逻辑
mainForm.addEventListener('click', (ee) => {
    if (ee.target.classList.contains('delete-sun-form')) {
        ee.preventDefault();
        const formContainer = ee.target.parentElement;
        const deleteCheckbox = formContainer.querySelector('input[id$="-DELETE"][type="checkbox"]');
        
        // 标记DELETE复选框为勾选
        deleteCheckbox.checked = true;
        formContainer.style.display = "none";
        
        // 更新表单编号和管理表单
        updateSunForm();
    }
});

关键修改点 #

1. 保留DOM元素状态：updateSunForm不再替换整个表单的HTML，而是逐个修改控件的id和name，彻底避免了原有控件状态丢失的问题。
2. 过滤已删除表单：仅对可见表单进行编号更新，确保表单编号连续且正确对应未删除的项。
3. 同步管理表单：除了TOTAL_FORMS，还同步INITIAL_FORMS字段，避免Django处理formset时出现校验错误。
4. 新表单状态重置：克隆新表单后清空输入值和DELETE复选框状态，避免继承原有表单的数据。

额外注意事项 #

• 确认模板中渲染了formset的完整管理表单（Django默认会自动生成TOTAL_FORMS、INITIAL_FORMS等字段）。
• 测试时可查看页面源码，确认DELETE复选框的checked属性是否存在，以及表单控件的id/name是否连续正确。

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