Knockout.js 中 Radio Button 失去选中状态的解决方案

在 Knockout.js 中对 observableArray 进行原地 splice 重排序时，radio button 绑定会意外丢失选中状态；根本原因是 dom 元素被销毁重建，导致浏览器原生 radio 的 checked 状态丢失。正确做法是使用 remove() + splice() 组合操作，确保 Knockout 正确触发绑定更新而不破坏元素引用。

在 knockout.js 中对 observablearray 进行原地 `splice` 重排序时，radio button 绑定会意外丢失选中状态；根本原因是 dom 元素被销毁重建，导致浏览器原生 radio 的checked 状态丢失。正确做法是使用 `remove()` + `splice()` 组合操作，确保 knockout 正确触发绑定更新而不破坏元素引用。

Knockout.js 的 observableArray 在响应式更新时，依赖于其内部的变更通知机制（如 push, remove, splice 等受控方法）来触发 ui 重渲染。但问题在于：直接对底层数组调用原生 Array.prototype.splice 并赋值回 observable（如 question.answers(splicedArray)）或误用 observableArray.splice() 参数，会导致 Knockout 无法精确追踪元素的“身份”变化 —— 尤其当绑定涉及 时，该元素的 checked 属性是原生 DOM 状态，不随 Knockout 数据模型自动同步。一旦 Knockout 因数据变更而重新生成对应 元素（即 DOM 节点被移除并重建），浏览器就会重置其 checked 状态，造成“看似无故取消选中”的现象。

你原始代码中的关键问题有两处：

1. 错误地将 observableArray() 返回的普通数组直接用于 splice 操作，再手动赋值（虽未显式写出 question.answers(newArray)，但 question.answers.splice(…) 实际调用的是 Knockout 封装的 splice，而你的参数逻辑存在越界风险）；
2. moveDown 条件判断有缺陷：i
3. 更重要的是，splice(i, 2, a, b) 这种“交换式”操作会强制 Knockout 视为两个元素被替换，从而销毁并重建两个 节点，radio 状态必然丢失。

✅ 正确解法是：先通过 remove() 安全摘除目标项（Knockout 会保留其余项的 DOM 引用），再用 splice(index, 0, item) 在新位置插入——整个过程仅新增/移动一个节点，其余 radio 元素保持原样，选中状态得以保留。

以下是修复后的标准实现：

self.moveUp = answer => {     const i = question.answers.indexOf(answer);     if (i >= 1) {         question.answers.remove(answer); // 安全移除，不触发无关重绘         question.answers.splice(i - 1, 0, answer); // 插入到上一位     } };  self.moveDown = answer => {     const i = question.answers.indexOf(answer);     const len = question.answers().Length;     if (i < len - 1) { // 修正边界：只能下移到倒数第二位之后         question.answers.remove(answer);         question.answers.splice(i + 1, 0, answer); // 插入到下一位     } };

⚠️ 注意事项：

• 永远避免直接操作 observableArray() 返回的普通数组并重新赋值（如 arr = ko.observableArray(); arr(arr().sort(…))），这会切断响应链；
• radio 绑定需确保 value 和 checked 都正确关联：例如 ，其中 selectedCorrect 应为 observable，且各 radio 的 value 必须唯一且与模型值严格匹配（字符串 ‘1’ ≠ 数字 1）；
• 若需支持 true/false 而非 ‘0’/’1’，可配合 valueAllowUnspecified 或自定义 binding handler，但非当前问题核心；
• 调试技巧：在 moveUp/moveDown 中添加 console.log(question.answers())，观察数组变化是否符合预期；也可用浏览器开发者工具检查 radio 元素是否被重复创建（Element tab 中闪烁或 node.id 变化）。

总结：Knockout 的响应式更新本质是“最小化 DOM 操作”，而 radio 的状态敏感性要求我们更谨慎地控制元素生命周期。采用 remove() + splice() 的原子移动模式，既符合 Knockout 最佳实践，也从根本上规避了表单控件状态丢失这一经典陷阱。