如何为动态创建的表格行内的Checkbox设置选中状态？

问题背景 #

动态添加表格行时，若“AutoInclude all in Group”复选框处于选中状态，行内的Checkbox需要同步设为选中。目前行和Checkbox创建正常，调试确认赋值的选中值正确，但Checkbox选中状态无法生效。

问题原因 #

1. HTML布尔属性使用错误：通过innerHTML拼接Checkbox时，错误地将checked属性设为字符串值（如checked='true'或checked='false'）。HTML中checked是布尔属性，只要属性存在，无论值是什么，Checkbox都会处于选中状态；若要取消选中，需完全移除该属性。
2. 混合DOM操作与Vue响应式：手动操作DOM添加元素会绕开Vue的响应式系统，不仅状态同步容易出问题，后续维护成本也更高。

解决方案 #

方案1：修复原生DOM拼接逻辑（快速临时修复） #

修改addUserToGroup方法中拼接Checkbox的代码，根据组复选框状态决定是否添加checked属性：

原错误代码：

cell_autoInclude.innerHTML = "<span style='display: block; text-align: center; padding-top: 0px;'><label class='label' style='margin-left: 0px'><input id='" + groupName
    + '-' + userEmail + '_checkbox' + "' type=checkbox checked='" + groupCheckBox.checked + "' style='margin-left: 0px'></label></span>";

修改后的代码：

// 根据组复选框状态决定是否添加checked属性
const checkedAttr = groupCheckBox.checked ? 'checked' : '';
// 使用模板字符串简化拼接
cell_autoInclude.innerHTML = `<span style='display: block; text-align: center; padding-top: 0px;'><label class='label' style='margin-left: 0px'><input id='${groupName}-${userEmail}_checkbox' type='checkbox' ${checkedAttr} style='margin-left: 0px'></label></span>`;

方案2：改用Vue数据驱动（推荐，符合Vue生态） #

利用Vue的响应式特性，通过修改数据让Vue自动渲染新行，彻底避免手动DOM操作：

1. 修改addUserToGroup方法，直接更新分组数据：

addUserToGroup(groupName) {
    const userEmail = document.getElementById(groupName + "_userLookupEmail").value;
    // 找到目标分组
    const targetGroup = this.emailGroupMembersAllList.find(item => item.EmailGroup.GroupName === groupName);
    
    if (!userEmail) {
        return alert("No user selected from Users Search Box.")
    }

    // 验证用户未在组内
    if (this.VerifyUserIsNotAlreadyInGroup(groupName, userEmail) !== "") {
        return;
    }

    // 将新用户添加到分组数据中，同步组的AutoInclude状态
    targetGroup.EmailGroup.EmailGroupUsers.push({
        Email: userEmail,
        AutoInclude: targetGroup.EmailGroup.AutoInclude
    });

    // 清空输入框
    document.getElementById(groupName + "_userLookup").value = "";
    document.getElementById(groupName + "_userLookupEmail").value = "";
}

2. （可选）同步组复选框与所有用户复选框的状态
   修改manageGroupCheckboxSelect方法，点击组复选框时批量更新所有用户的AutoInclude值：

manageGroupCheckboxSelect(groupName) {
    const targetGroup = this.emailGroupMembersAllList.find(item => item.EmailGroup.GroupName === groupName);
    // 切换组的AutoInclude状态
    targetGroup.EmailGroup.AutoInclude = !targetGroup.EmailGroup.AutoInclude;
    // 同步所有用户的状态
    targetGroup.EmailGroup.EmailGroupUsers.forEach(user => {
        user.AutoInclude = targetGroup.EmailGroup.AutoInclude;
    });
}

这种方式下，Vue会通过v-for自动渲染新行，Checkbox的选中状态由:checked="user.AutoInclude"自动绑定，完全遵循Vue的响应式逻辑，后续维护更简单。

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