实现第一个checkbox勾选/取消时联动第二个checkbox状态的功能

改动思路 #

现有代码已经实现勾选#viberOne时自动勾选#viberTwo的正向流程，只需要在#viberOne取消勾选的分支中补充同步操作，就可以覆盖需求场景，不需要额外判断“两个复选框均处于激活状态”的前置条件——只要第一个复选框被取消勾选，同步把第二个置为未勾选的操作，天然就覆盖了目标场景，还能避免出现状态不一致的边缘问题。

最小改动版本（完全保留原有代码结构） #

只需要在原函数的else分支补一行赋值代码，改动成本最低：

function onToggle() {
  if (document.querySelector('#viberOne').checked) {
    // 勾选第一个复选框时，同步勾选第二个
    console.log('checked');
    document.getElementById("viberTwo").checked = true
  } else {
    // 取消勾选第一个复选框时，同步取消第二个的勾选
    console.log('unchecked');
    document.getElementById("viberTwo").checked = false
  }
}

简化优化版本 #

由于两个复选框的状态是完全绑定的，可以直接省略冗余的if分支判断，直接同步状态值，代码更简洁，也不会出现漏写分支的问题：

function onToggle() {
  const viberOneChecked = document.querySelector('#viberOne').checked;
  // 第二个复选框状态完全跟随第一个
  document.getElementById('viberTwo').checked = viberOneChecked;
  console.log(viberOneChecked ? 'checked' : 'unchecked');
}

无需改动的HTML结构 #

原有HTML代码可以直接复用，不需要做任何调整：

<input id="viberOne" onclick="onToggle()" type="checkbox" name="viberOne">
<input id="viberTwo" type="checkbox" name="viberTwo">

实现效果 #

• 勾选#viberOne时，#viberTwo会自动同步为勾选状态
• 两个复选框均处于勾选状态时，只要取消#viberOne的勾选，#viberTwo会同步变为未勾选状态
• 全程保证两个控件状态一致，不会出现单边状态偏差的问题

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