如何通过JavaScript更新HTML复选框（checkbox）状态并保留原有功能

架构老林

2026-9-27

解决方案

你原有代码的核心问题是仅修改了checkbox的value属性，没有同步更新控制选中状态的checked布尔属性，所以界面不会自动更新勾选状态。修改后代码如下，完全保留第一个checkbox的原有功能：

完整代码

HTML部分（无需修改）

<input type="checkbox" value="On" id="onoff" onclick="onoff();">
<input type="checkbox" value="Off" id="xy" onclick="xy();">

JS部分

// 第一个checkbox的原有功能完全保留，仅补充了value与选中状态的同步逻辑，避免状态不一致
function onoff() {
  const onoffDom = document.getElementById('onoff');
  if (onoffDom.checked) {
    onoffDom.value = "On";
    console.debug("ON");
  } else {
    onoffDom.value = "Off";
    console.debug("OFF");
  }
}

function xy() {
  const xyDom = document.getElementById('xy');
  const onoffDom = document.getElementById('onoff');
  // 第二个checkbox被勾选时同步第一个为选中状态
  if (xyDom.checked) {
    onoffDom.checked = true;
    onoffDom.value = "On";
  }
  // 若需要第二个checkbox取消勾选时同步取消第一个的选中状态，可放开以下注释
  // else {
  //   onoffDom.checked = false;
  //   onoffDom.value = "Off";
  // }
  console.debug("xy");
}